设置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. Ubuntu系统下,pip3安装python3的pymysql包 报错的问题

    sudo pip3 --version 查看pip3的版本 sudo pip3 install --upgrade pip 更新pip3 sudo pip3 list  查看安装的包列表 如上图, p ...

  2. Java 输入流和字符串互相转换

    import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.InputStream; impo ...

  3. bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  4. vue后台_纯前端实现excel导出/csv导出

    之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...

  5. css去除图片间隙

    问题如下图 把图片转换成块状元素即可 .img{ display: block; } 解决后:

  6. NoSql数据库Redis系列(3)——Redis数据持久化(RDB)

    大家都知道 Redis 是一个内存数据库,所谓内存数据库,就是将数据库中的内容保存在内存中,这与传统的MySQL,Oracle等关系型数据库直接将内容保存到硬盘中相比,内存数据库的读写效率比传统数据库 ...

  7. adb-andorid记录当前手机的日志当前显示的app进程及activity,

    adb logcat -v time> /home/sumsang.log adb shell dumpsys window | grep mCurrentFocus

  8. cropper手机使用实例

    cropper手机使用实例 一.总结 一句话总结: 启示:还是要多个相关的实例交叉使用,相互印证,查漏补缺,可以更加高效和方便和节约时间 二.Cropper.js从前台到后台的完整实例应用 转自或参考 ...

  9. 如何监控tomcat性能:[1]工具一

    | 浏览:155 | 更新:2014-12-13 10:06 1 2 3 4 5 6 分步阅读 tomcat经常被用作中间件,也有直接作WEB的,自带的工具不是很给力,推荐以下的办法 工具/原料 ja ...

  10. 从0开始学爬虫2之json的介绍和使用

    从0开始学爬虫2之json的介绍和使用 Json 一种轻量级的数据交换格式,通用,跨平台 键值对的集合,值的有序列表 类似于python中的dict Json中的键值如果是字符串一定要用双引号 jso ...