首先，上图

说明

1. clientHeight
大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
2. offsetHeight
在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。
3. scrollHeight
scrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。
计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

在浏览器中的区别在于：
IE6、IE7 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。
FF、Chrome 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。
注： 以上都是对于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。在所有的浏览器中，如果你想获取整个视窗的高度，你得用documentElement.clientHeight，因为body.clientHeight是由它的内容决定的。 关于body和documentElement的这些属性，则完全是另外一回事：

html页面高度问题的更多相关文章

  1. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

  2. 移动设备页面高度不足时min-height 的尴尬处理

    移动设备页面高度不足时min-height 的尴尬处理 在做html5的页面时,经常遇到页面内容太少撑不起来整个手机屏幕的高度. 我们经常使用min-height来处理,比如min-height:56 ...

  3. html页面高度不同浏览器兼容性设置

    页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示. 而页面在获得自己的高度时,发现总是比预想的大.经过参考别人的博客,发现原来是w ...

  4. js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置

    <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...

  5. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  6. 框架页面高度自动刷新Javascript脚本

    实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如 ...

  7. 获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素

    最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题. 获取Iframe页面高度并赋值给Iframe Html <iframe name="co ...

  8. swiper 不同页面高度自适应

    在使用swiper写页面滑动时发现不同页面高度无法自适应,使用autoHeight:true也不起作用 研究了一下发现可以这样设置 .swiper-slide{ overflow: hidden; } ...

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

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

  10. tips 前端 各个设备的页面尺寸的media query 与页面高度的经验总结

    有段时间 扑了一个多月的在一个wifi的前端项目上 快做完时 各种小问题一堆一堆的修复 处理了一些很零散的问题 因为页面有一个所有页面都有一个背景色 有的页面有背景图 主要重点是移动前端的方向 因为现 ...

随机推荐

  1. django 前端模板继承显示model中使用choices的字段

    比如model中的一个class Need class Need(models.Model): """ 任务 """ party_a=mod ...

  2. 最短路 次短路 k短路(k很小)

    最短路 luogu 3371 https://www.luogu.org/problemnew/show/P3371 #include <cstdio> #include <cstd ...

  3. IO处理要注意的事：关闭资源！关闭资源！关闭资源！

    案例1: 现象: 同事做本地txt数据切分然后处理,发现删除本地临时文件目录中的文件时,有时成功,有时删除完了发现文件还在.代码各处都不报错,且各种日志打印正常. 解决: 最后发现,是业务逻辑代码中有 ...

  4. django系列 1 :python+django环境搭建 +mac提示找不到manage.py命令

    1.安装python3 2.设置python3的环境变量 3.进入命令行模式,输入 pip install django 1.10.3 4.验证是否安装完成 pip show django 5.dja ...

  5. TODO java 作业-梭哈--待完成

    作业:定义一个类,该类用于封装一桌梭哈游戏,这个类应该包含桌上剩下的牌的信息,并包含5个玩家的状态的信息,他们各自的位置,游戏状态(正在游戏或已放弃),手上已有的牌等信息.如果有可能,这个类还应该实现 ...

  6. (链表) 206. Reverse Linked List

    Reverse a singly linked list. Example: Input: 1->2->3->4->5->NULL Output: 5->4-> ...

  7. （贪心 map） Flying to the Mars hdu1800

    Flying to the Mars Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  8. 应用实战：从Redis到Aerospike，我们踩了这些坑

    个推专注为开发者们提供消息推送服务多年.通过个推SDK,手机终端与服务器建立长连接,维持在线状态.然而在网络异常等情况下,消息无法实时送达到终端用户,因而推送服务器建立了一份离线消息列表,以待用户重新 ...

  9. Collection 接口

    Collection 接口中的方法 ArrayList implements List List extends Collection 主要方法:toArray(); 集合转数组 clear(); 清 ...

  10. 看我如何未授权登陆某APP任意用户（token泄露实例）

    转载:https://www.nosafe.org/thread-333-1-1.html  先来看看这个.   首先,我在登陆时候截取返回包修改id值是无效的,因为有一个token验证,经过多次登陆 ...