设置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. 坑：找到LoadRunner中Recording Options和 Run Time Settings配置选项确实的原因

    在loadrunner安装好后,打开页面查看发现分别的缺失内容如下: 现象: 1. Recording Options 2.Run Time Settings 3.解决 原因是LR是付费的,你的安装包 ...

  2. FIS3

    #npm install -g cnpm --registry=https://registry.npm.taobao.org#cnpm install -g fis3 npm install fis ...

  3. 01_tf和numpy的区别

    import numpy as npimport tensorflow as tf # 这里是为了演示numpy和tf的区别.np.random.seed(43) x_data = np.random ...

  4. 在Ubuntu 18.04上安装OpenCV 4（C ++和Python）

    OpenCV于11月20日发布了OpenCV-3.4.4和OpenCV-4.0.0.这些版本中有很多错误修复和其他更改.发布重点如下: OpenCV现在是C ++ 11库,需要符合C ++ 11标准的 ...

  5. Oracle 11g 数据库 expdp/impdp 全量导入导出

    从一个用户导出导入到另一个用户 问题 环境:oracle 11g; redhat 6 usera是具有DBA权限,密码为usera 全量导出usera用户下的所有内容,并导入到新建的userb用户 解 ...

  6. 树莓派连接18b20测温度

    树莓派系统包含了18b20的驱动(1-wire interface),我们只需要将其开启即可.有两种开启方式: 方式一:输入raspi-config命令,然后在interfacing options ...

  7. JVM 扩展类加载器1

    1.创建类 public class MyTest19 { public static void main(String[] args) throws Exception { System.out.p ...

  8. CMU Advanced DB System - Query Optimizer

    Overview Optimizer模块所处在的位置如图, 那么做optimize的目的是, 找出所有‘correct’执行计划中‘cost’最低的 那么这里首先要明确的概念,‘correct’,关系 ...

  9. pip错误 ImportError: No module named 'pip_internal'

    ubuntu16.04 - wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate sudo python get-pip.p ...

  10. typescript属性类型接口

    /* typeScript中的接口 - 1.属性类接口 */ /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定 ...