[JS]document.body.clientHeight的取值(转)

最新推荐文章于 2024-09-05 14:38:04 发布
最新推荐文章于 2024-09-05 14:38:04 发布
阅读量1.2k 收藏
点赞数
分类专栏： javascript 文章标签： body.clientHeight 获取到 xhtml
本文深入解析HTML与XHTML标准下，如何正确获取页面高度，通过比较document.body.clientHeight与document.documentElement.clientHeight的使用场景与效果，帮助开发者在不同环境下实现页面元素的精确定位。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720.

可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.

原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.

区别新旧标准的行是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
前者指明该页面使用旧标准, 后者指明该页面使用新标准.

总结:
XHTML中用 document.documentElement.clientHeight  代替
document.body.clientHeight

转自:http://www.cnblogs.com/fullhouse/archive/2012/01/05/2313800.html

JavaScript DOM对象
hx_1551的博客
01-13 382
1.含义： 1) DOM ：( Document Object Model )：[ 文档对象规则 ] 辅助JavaScript脚本操作页面元素的规则 2) Node： 页面的节点、元素 3) document ：页面第一个节点 ( 根节点 ) 2.获取页面节点： 1) document.节点;//只能点body层级及以上的节点 ( html:docuemntElement) ...
一文理清JS中获取盒子宽高各方法的差异
九月镇灵将的博客
01-01 1987
这段时间在研究一个反爬产品，环境检测用到了很多个盒子宽高取值方法，如，各个方法取值结果不大相同，在此记录下遇到的方法。
[JS]document.body.clientHeight的取值
weixin_30550271的博客
01-05 238
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可是在XHTML中, 如果body 体中只有一行, 则documen...
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 527
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
document.body.clientHeight
weixin_33835690的博客
03-03 239
document.body.clientWidth ==&gt; BODY对象宽度（也是可见区） document.body.clientHeight ==&gt; BODY对象高度（也是可见区） document.documentElement.clientWidth ==&gt; 可见区域宽度 document.documentElement.clientHeight ==&gt; 可见...
React开发（235）:document.body.clientHeight
歌谣的博客
10-31 421
document.body.clientHeight获取可视化高度
浅谈DOCTYPE对$(window).height()取值的影响
09-01
这段代码首先检查文档高度是否大于窗口高度，如果是，则使用`document.body.clientHeight`获取窗口高度，因为在这种模式下，它能正确反映可视区域的高度。否则，直接使用$(window).height()，这适用于内容未超过一...
Three.js 带你选购兰博基尼
幽幽谷
09-05 1273
Three.js实现车展，带你选车
使用D3.js实现简单的图谱展示
A_xiaomingming的博客
05-08 2002
<html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <style> html,body,#kgDiv{ .
document.body.clientHeight高度问题
hello world
09-14 1718
移动端滚屏一次滚动一屏，document.body.clientHeight本来是为了获取屏幕高度，可项目发现获取到的值非常大 经排查，应先设置body高度100%，或者使用document.documentElement.clientHeight
document.body.clientHeight 只是窗口高度四舍五入的结果，宽度也是如此
weixin_44350171的博客
12-19 3356
在测试拖拽时，要实现被拖拽的元素不能跟鼠标一起跑到窗口外； 所以 在style.top<0时使其style.top=0 在style.top<document.body.clientHeight - div1.offsetHeight时，使其style.top=document.body.clientHeight - div1.offsetHeight（即窗口高度 减去 元素高度，就是元素能被拖拽到的最低位置，当小于这个最小值时，直接把最小值赋值给它） 但是出现了一个bug，如下图 按理说我把
js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。
菜鸟史
02-25 379
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全
document.body.clientHeight的取值
weixin_34166472的博客
11-28 110
[JS]document.body.clientHeight的取值 有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可...
document.body.scrollTop,document.body.clientHeight的值为0的问题
Huakmel的专栏
03-17 1355
在写个漂浮广告时遇到document.body.scrollTop和document.body.clientHeight为零的问题，在网上找到了原因：是因为html/jsp文件头部加了文档类型。 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">解决办法可以有
offsetHeight, clientHeight与scrollHeight的区别
liyanfang19的专栏
03-09 418
clientHeight 大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
document.body.clientHeight 和 document.documentElement.clientHeight 的区别
qupeng666的博客
08-28 656
当页面上有DOCTYPE的时候,值为 document.body.clientHeight = 54px  //页面实际内容高度 document.documentElement.clientHeight = 729px //浏览器可视化区域高度 当没有DOCTYPE时 document.body.clientHeight = 729px  document.document
js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop
小树吥倒
01-09 628
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全
获取除了浏览器工具栏的浏览器高度
最新发布
04-01
<think>好的，我现在需要回答用户关于如何通过代码计算浏览器可视区域高度（不包括工具栏）的问题。首先，我得回忆一下相关的知识，并结合提供的引用资料来整理答案。 根据用户提供的引用内容，有几个关键点需要注意。引用[1]提到，在IE和Opera中，scrollHeight可能小于clientHeight，这可能是因为不同浏览器对可视区域的计算方式不同。引用[2]给出了浏览器兼容的代码示例，使用document.documentElement和document.body的offsetHeight属性。引用[3]则提到了在iOS的Safari浏览器中，使用calc(100vh - 75px)来减去底部工具栏的高度。而引用[4]讨论了在iOS Chrome中如何计算窗口高度减去地址栏的高度，其中测试代码显示可能需要特殊处理。 首先，我应该解释不同浏览器之间的差异，特别是移动端浏览器如iOS Safari和Chrome，它们的工具栏可能会遮挡部分可视区域。这时候，使用100vh可能会包含工具栏的高度，导致实际可视区域被遮挡。因此，正确的做法可能是通过JavaScript动态获取可视区域的高度。 引用[2]中的代码示例展示了如何获取窗口的宽度和高度，使用document.documentElement和document.body的offsetHeight。不过，这里可能需要确认offsetHeight是否真的代表可视区域的高度，或者是否应该使用clientHeight。通常，clientHeight表示元素内部的高度，包括padding但不包括滚动条、边框和边距。而offsetHeight包括元素的垂直内边距、边框和滚动条（如果有的话）。因此，可能需要根据具体情况选择正确的属性。 此外，在移动端浏览器中，特别是iOS的Safari和Chrome，当用户滚动页面时，地址栏可能会隐藏，导致可视区域的高度动态变化。这时候，使用window.innerHeight可能会更准确，因为它返回窗口的视口高度，包括滚动条但不包括工具栏。但是，根据引用[4]中的测试，使用innerHeight可能在显示地址栏时的高度和隐藏时的不同，需要处理这种动态变化。 引用[3]的解决方案是使用CSS的calc函数，通过100vh减去固定的工具栏高度（如75px），这种方法适用于已知工具栏高度的情况，但可能不够灵活，因为不同设备和浏览器的工具栏高度可能不同，特别是当用户旋转屏幕方向时。 综合这些信息，正确的做法应该是结合使用JavaScript来动态获取可视区域的高度，并处理不同浏览器的兼容性问题。例如，可以优先使用window.innerHeight，如果不可用，则回退到document.documentElement.clientHeight或document.body.clientHeight。此外，还需要注意在移动端浏览器中，由于工具栏的显示和隐藏会导致窗口大小变化，可能需要监听resize事件来更新高度。 现在需要将这些思考整理成一个结构清晰的回答，分步骤说明如何实现，并引用提供的资料来支持各个步骤。同时，生成相关问题，帮助用户进一步理解可能遇到的问题。</think>要获取浏览器可视区域高度（不包括工具栏），需根据浏览器类型和场景采用不同方法： ### 一、桌面浏览器解决方案 1. 标准浏览器通过组合属性获取 ```javascript const height = Math.max( document.documentElement.clientHeight || 0, window.innerHeight || 0 ); ``` 这组合了`clientHeight`和`window.innerHeight`的取值[^2]，确保兼容主流浏览器。 ### 二、移动端浏览器特殊处理 2. iOS Safari的工具栏适配 ```css .container { height: calc(100vh - 75px); /* 减去底部工具栏高度 */ } ``` 通过CSS计算属性动态调整高度[^3]，但需注意不同设备工具栏高度可能不同。 3. 动态高度检测（推荐） ```javascript function getViewportHeight() { return window.visualViewport?.height || window.innerHeight; } // 添加窗口尺寸变化监听 window.addEventListener('resize', () => { console.log(getViewportHeight()); }); ``` 使用`visualViewport`API可精确获取当前可见区域高度[^4]，特别是在移动端浏览器地址栏隐藏/显示时更准确。 ### 三、跨浏览器兼容代码 ```javascript function getVisualHeight() { if (window.visualViewport) { return window.visualViewport.height; } return Math.min( document.documentElement.clientHeight, window.innerHeight || 0 ); } ``` 此方案优先使用现代浏览器的`visualViewport`特性，降级方案兼容旧版浏览器[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值