html页面高度问题
2024-10-12 18:56:58
首先，上图
说明
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的这些属性，则完全是另外一回事：
最新文章
- 生成树形结构的json字符串代码(c#)供前端angular tree使用.
- 禁用datagridview中的自动排序功能
- 思科Cisco 2960系列交换机配置命令
- 单例模式中的多线程分析synchronized
- （转）【ASP.NET Web API】Authentication with OWIN
- WindowsService 安装后报错： 无法启动计算机“.”上的服务 解决方案
- MyBatis(3.2.3) - One-to-one mapping using nested ResultMap
- Mapper映射语句高阶应用——ResultMap
- c# Ftp下载程序源代码解析
- Hibernate框架 主配置文件（Hibernate.cfg.xml） 映射配置 说明
- PHP 中的Trait
- Python——转义字符解释
- html引用外部js和css
- linux 查看当前系统版本号
- 解决AJAX session跨域失效
- Scala进阶之路-并发编程模型Akka入门篇
- TortoiseGit推送代码到Gerrit的过程
- 不同版本Eclipse对JDK版本要求
- HDUOJ-----4510 小Q系列故事——为什么时光不能倒流
- CCPC 2016-2017, Finals Solution