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>
  • 相关阅读:
    poj 3436 (最大流)
    C#.NET学习笔记11,12---布尔表达式2组合,if语句
    C++编程规范和标准总结
    hdu 4627 水数学题
    jquery第二期:三个例子带你走进jquery
    Java核心技术,让计算机"一芯多用"的多线程技术
    leetcode_question_73 Set Matrix Zeroes
    Frame动画
    HDU 4602 Partition
    Linux Kernel代码艺术——系统调用宏定义
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/8045066.html
Copyright © 2011-2022 走看看