设置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. UOJ#299. 【CTSC2017】游戏 线段树 概率期望 矩阵

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ299.html 前言 不会概率题的菜鸡博主做了一道概率题. 写完发现运行效率榜上的人都没有用心卡常数——矩阵怎么可以用数组 ...

  2. 部署Hadoop集群之前的一些系统配置

    修改内核参数 在/etc/sysctl.conf文件中添加如下配置(需要root权限)以下参数的默认值是在centos7下查看的fs.file-max = 6815744 //文件描述符总数,默认值: ...

  3. weblogic介绍

    快速阅读 介绍weblogic中间件,以及自身架构和几个基本概念,如何下载,安装等后面再详细介绍 . 什么是weblogic WebLogic最早由 WebLogic Inc. 开发,后并入BEA 公 ...

  4. mac安装rust的pyo3模块

    Rust 发布的工具链包括了 stable.beta 和 nightly 三种不同版本. nightly 是最激进的版本,包含了大量(可能不稳定)的新/高级特性.stable 版本目前可能还不支持一些 ...

  5. html5的datalist元素详解

    html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...

  6. 范仁义web前端介绍课程---5、webstorm的下载安装

    范仁义web前端介绍课程---5.webstorm的下载安装 一.总结 一句话总结: webstorm破解版搜索:webstorm破解 site:52pojie.cn 编辑器随便选用,功能都差不多,哪 ...

  7. if ( ! defined('BASEPATH')) exit('No direct script access allowed')的作用

    在看源代码时,发现codeigniter框架的控制器中,总是加上这样一段话: if(!defined('BASEPATH'))exit('No direct script access allowed ...

  8. 【JDBC】仅输入表名和要插入的记录数，自动检测表的字段和类型，然后插入数据的全自动程序（Oracle版）

    之前写的批量插值程序只是五六半自动版本,因为表的字段还需要手工填写,这回只要指定表名和要插多少数据就行了,类似于全自动突击步枪,扣动扳机就把字段打完为止. 全自动程序如下,诸位拿下去后可以修改成自己想 ...

  9. pip安装各种模块

    date: 2019-08-20   19:27:09 pip install requests pip install xpinyin pip install redis

  10. 字典树(查找树) leetcode 208. Implement Trie (Prefix Tree) 、211. Add and Search Word - Data structure design

    字典树(查找树) 26个分支作用:检测字符串是否在这个字典里面插入.查找 字典树与哈希表的对比:时间复杂度:以字符来看:O(N).O(N) 以字符串来看:O(1).O(1)空间复杂度:字典树远远小于哈 ...