zoukankan      html  css  js  c++  java
  • 网页宽度自适应

    方法一:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type=”text/css”>
    html body {
    height:height:100%;
    </style>

    方法二:

    <script type="text/javascript">
    function resizeDiv(minusWidth, minusHeight)//减去宽度,减去高度
     {
        var tb =document.getElementById ("wrapper");//这里是刚刚定义的div的ID
                var ieWidth = parseInt(document.body.clientWidth.toString().replace("px", ""), 10) - minusWidth;//ie即高度;parseint:解析国际;document:文件;
                //clientWidth:客户端宽度;toString:转换为字符串;replace:代替;
                var tbWidth = parseInt(tb.style.width.toString().replace("px", ""), 10);
                if (ieWidth != tbWidth)
                    tb.style.width = ieWidth + "px";
                var ieHeight = parseInt(document.body.clientHeight.toString().replace("px", ""), 10) - minusHeight;
                var tbHeight = parseInt(tb.style.height.toString().replace("px", ""), 10);
                if (ieHeight != tbHeight)
                    tb.style.height = ieHeight + "px";
                    setInterval("resizeDiv(20,40);", 100); //setInterval:设置间隔; resizeDiv:调整大小的div;
     }
    </script>
    
    <script>  
      function setContentHeight(argument) {  
        document.getElementsByClassName('wrapper')[0].style.height = window.outerHeight+'px';  
      }   
      window.onload = setContentHeight;  
      window.onresize = setContentHeight;  
    </script>

    方法三:

    <script type="text/javascript">
        window.onload = windowHeight; //页面载入完毕执行函数
        function windowHeight() {
          var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度
          var bodyHeight = document.getElementById("wrapper"); //寻找ID为content的对象
          bodyHeight.style.height = (h - 25) + "px"; //你想要自适应高度的对象
        }
        setInterval(windowHeight, 500)//每半秒执行一次windowHeight函数
      </script>
  • 相关阅读:
    第十二周作业
    第十二周上机练习
    第十一周作业
    第十一周上机练习
    第十周上机作业
    第九周上机练习
    第八周作业
    软件测试第一次作业
    Jsp第二次作业
    JSP第一次作业
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/8045066.html
Copyright © 2011-2022 走看看