设置html,body{height:100%}

在使用html5文档类型的时候， 设置了html body的高度100%之后，两个浏览器就都能获取document.body.clientHeight了

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>弹出层自定义（自动获取高度）</title>

        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

        <style type="text/css">

            *{margin: 0;padding: 0;}

            .Load{width:100%; background-color: rgba(221,221,221,0.5);}

            .LoadDiv{margin: auto; text-align: center;vertical-align: middle;position: absolute;top: 50%; left: 50%;}

        </style>

        <script type="text/javascript">

            $(document).ready(function () {

                     window.onload = function () {

                         getHeight();//调用函数

                     };

                      function getHeight() {

                          var Load = document.getElementById('Load');//获取Load的高度

                          var body_height = document.documentElement.clientHeight;//document.body.clientHeight中在<!DOCTYPE html>声明下会返回0

                          alert(body_height);

                          Load.style.height = body_height + 'px';//将正文的高度赋值给Load

                      }

            });

        </script>

    </head>

    <body>

        <div class="Load" id="Load">

            <div class="LoadDiv">

                <img src="layer/theme/default/loading-0.gif"/>

            </div>

        </div>

    </body>

</html>

获取可视区域高度赋值给div（解决document.body.clientHeight的返回值为0的问题）的更多相关文章

  1. js获取可视区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  2. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  3. JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  4. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  5. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  6. jquery 获取浏览器窗口的可视区域高度 宽度 滚动条高

    原文:http://www.open-open.com/code/view/1421827925437 alert($(window).height()); //可视区域高度 alert($(docu ...

  7. js获取页面高度赋值给div

    <script type="text/javascript"> window.onload=function(){ map_width=document.body.cl ...

  8. jqury中$("#div").index($this)在setTimeoutt中返回值一直是-1的问题解决方案

    今天遇到一个十分蛋疼的问题,花了我一个多小时才解决,其实十分简单,但我是新手,好了,事情是这样的: 我想让鼠标停留在某个元素一定时间再显示它隐藏的内容(不然你鼠标快速滑上滑下,反反复复,如果碰上sli ...

  9. 解决IDEA中自动生成返回值带final修饰的问题

    修改配置文件: Editor--Code Style--Java--Code Generation--将Make generated local variables final勾选上

随机推荐

  1. Iptables之一基本应用

    Firewall :防火墙,隔离工具 工作于主机或网络的边缘,对于进出本主机或网络的报文根据事先定义好的检查规则作匹配检测,对于能够被规则所匹配到的报文做出相应处理的组件 主机防火墙 网络防火墙 ID ...

  2. 2、ES6结构赋值和模板字符串

    ES6允许按照一定的模式,从数组和对象中提取值,这被称为结构,即解开数据的结构 1.数组的解构赋值 let [a,b] = [1,2] let [a,b,c=100] = [1,2] //c的默认值为 ...

  3. Mybatis异常-java.lang.IllegalArgumentException: invalid comparison:java.util.Date and java.lang.String

    原因:在Mapper.xml中对非字符串类型的数据进行了是否为空判断,如date类型的数据Create_Date != '',decimal类型的数据price != ''都会报这个错误 只有字符串才 ...

  4. snprintf用错了快10年…

    int snprintf(char *str, size_t size, const char *format, ...); 从用snprintf开始,size参数一直传的都是buff_size-1, ...

  5. sass - for循环写法

    如要设置多个li的动画延迟时间时 注:这里选择器要加#{}才行 不然就会编译成: 6.7. 插值语句 #{} (Interpolation: #{}) 通过 #{} 插值语句可以在选择器或属性名中使用 ...

  6. 网关 apache APISIX

    网关 apache - 国内版 Binghttps://cn.bing.com/search?q=%E7%BD%91%E5%85%B3+apache&qs=n&form=QBRE&am ...

  7. QVector init error

    QMetaType::registerType: Binary compatibility break -- Size mismatch for type 'PtsData' [1025]. Prev ...

  8. ES6深入浅出-4 迭代器与生成器-4.总结

    yield的值就是外面调用next得到的值 ES6给的新的语法,如果你给任何一个对象添加一个Symbol.interator的key,同时它的值是一个生成器. 下面选中的就是生成器.生成返回的东西是迭 ...

  9. Spring Cloud微服务安全实战- 2-1 环境安装

    下面这些.后续随着讲课逐步再去安装. 2019年1月开始 jdk是收费的 找jdk最后一个免费版本 8u192这是jdk1.8最后的一个免费版本 STS spring提供的ide可以方便的开发spri ...

  10. 构造方法(和python初始化变量类似)

    public class Demo1 { int  name2=1; public Demo1(int name) { name=name2; } public Demo1() { } public ...