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>
  • 相关阅读:
    ACM学习历程—UESTC 1219 Ba Gua Zhen(dfs && 独立回路 && xor高斯消元)
    ACM学习历程—BZOJ 2115 Xor(dfs && 独立回路 && xor高斯消元)
    ACM学习历程—HDU 5536 Chip Factory(xor && 字典树)
    ACM学习历程—HDU 5534 Partial Tree(动态规划)
    ACM学习历程—HDU 3949 XOR(xor高斯消元)
    CSS 负边距读后感
    移除input number上的spinner
    js另类值交换
    自己写js库,怎么支持AMD
    <strong>和 <b> 的区别
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/8045066.html
Copyright © 2011-2022 走看看