window.document.body.clientHeight就可以

window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、
FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可

JS如何获取页面可见区域高度的更多相关文章

  1. js里获取页面高度和文档高度

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  2. js 获取页面可视区域宽高

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

  3. 使用js获取页面的各种高度

    使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...

  4. js获取页面的各种高度与宽度

    document.body.scrollTop等属性可以获取页面滚动距离等,但是此类属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0, 所以一 ...

  5. js中获取浏览器和屏幕高度

    Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...

  6. JS/JQ获取各种屏幕的高度和宽度

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  7. JS - 获取页面滚动的高度

    document.documentElement.scrollTop||document.body.scrollTop

  8. js中获取页面元素节点的几种方式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,

    前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发 ...

随机推荐

  1. 关于MyEclipse 半天打不开的问题(工作区间损坏)--转

    删掉 {workspace}/.metadata/.plugins\**\*.snap 所有的 .snap文件 一般可以解决问题 如果上面一步解决不了问题, 那么删掉 {workspace}/.met ...

  2. 2016沈阳网络赛 odd-even number

    odd-even number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  3. PAT (Advanced Level) 1071. Speech Patterns (25)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  4. pe and elf

    http://staff.ustc.edu.cn/~sycheng/sst/exp_crack/ELF.pdf https://refspecs.linuxbase.org/elf/TIS1.1.pd ...

  5. Codeforces#373 Div2

    Ranting重新回到浅蓝的一场比赛 Problem A 题意:月亮的大小是按照这样的顺序排列的0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ...

  6. CSS中的浮动清除

    先来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. 理想的效果:可实际的效果: 这个地方就涉及到浮动,因为两个父元素div都没有高度(或者小于子元素的 ...

  7. [转] spring事务管理几种方式

    前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...

  8. 程序ajax请求公共组件:app-jquery-http.js

    // --------网络操作-------------------- $.HTTP = { getUrlParam : function(name) { var reg = new RegExp(& ...

  9. 系统里有Courier New字体 Eclipse没有这个字体选项

    问题状态: 系统里有Courier New字体 Eclipse没有这个字体选项问题原因: windows(xp)中的系统字体分为"显示"和"隐藏"两种状态,当为 ...

  10. Eclipse PHP 代码无法自动提示函数

    在 linux 系统的 workwpace 里按 ctrl+h,显示出隐藏的文件,找到 .metadata 文件夹,然后将该文件夹删除,再重启 Eclipse 即可.其实它会将之前 Eclipse 连 ...