IE6下document.documentElement.clientHeight值为0的问题

最新推荐文章于 2022-03-21 17:34:21 发布
原创 最新推荐文章于 2022-03-21 17:34:21 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ie

本文介绍了在Internet Explorer 6浏览器中确定使用哪种DOM元素（document.documentElement或document.body）的方法来确保网页布局的一致性和兼容性。

在IE 6下 如果有 <!DOCTYPE>
就用 document.documentElement
否则用 document.body

Js浏览器窗体宽高,用户屏幕可视区域大小位置及如何制作吸顶
qq_44880532的博客
10-31 739
浏览器对象 浏览器当前窗口的宽高 document.documentElement.clientWidth 和 document.documentElement.clientHeight 是获取浏览器当前窗口视图区域（也就是说不包括工具栏、滚动条等）的实际宽高（旧的HTML标准是写作document.body.clientWidth/clientHeight，已过时，建议大家用新标准来描述） 由于IE8-会把这个属性当作整个文档的宽度或高度，而JQ的$(window).height()在部分浏览器下也
用document.documentElement取代document.body的原因分析
01-19
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。 上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想...
document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
weixin_33932129的博客
09-04 610
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题。这两个应该不是一个东西。   页面中加了：&lt;!DOCTYPE html&gt; 很明显在谷歌浏览器中两个值不是一个概念。   页面中不加：&lt;!DOCTYPE html&gt; 发现两个的值掉了个个！ ...
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 548
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
vue获取client为0_vue document.documentElement.clientHeight为0
weixin_39677106的博客
12-22 1862
其实也不是获取不到，正常手机都能获取的到，但是在个别手机上面获取不到，个别手机指的是华为P20。因为在Android端，如果你fbc之后getHeight()也是获取不到，我就想是不是mounted函数调用的时候，页面还没有渲染好呢，翻看了一下vue生命周期，果然是，于是我延迟300毫秒获取高度setTimeOut(()=>{...},300)并没有什么卵用，然后我灵光一现，发现vue有这么...
document.documentElement.clientHeight
洪文聊架构
12-08 4819
于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚
关于window.pageYOffset和document.documentElement.scrollTop
12-10
这个值是一个整数，其默认值为0。在给定的例子中，当执行 `window.scrollBy(0, 100)` 时，页面向下滚动100像素，然后通过 `alert(window.pageYOffset)` 弹出提示框显示滚动后的距离，即100。这说明`pageYOffset`会...
javascript document.compatMode兼容性
10-29
JavaScript中的`document.compatMode`属性是用来检测浏览器当前的渲染模式，这对于处理跨浏览器的兼容性问题至关重要。在网页开发中，浏览器对HTML文档的解析方式有两种：Quirks Mode（怪异模式）和Standards Mode...
一个document.documentElement.clientWidth为0的问题
weisuochengxuyuan的专栏
12-27 956
http://hi.baidu.com/bluedream_119/item/26db5a73c9774344ee1e532a 一个document.documentElement.clientWidth为0的问题 关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽：" document.bo
document.body.clientHeight返回值为0的解决方案
热门推荐
web前端菜鸟工程师
01-12 1万+
最近在做一个div内容高度在不同浏览器下的高度自适应，发现document.body.clientHeight的返回值为0. 网上查了一下， 貌似有很多个解决方案。  1. 使用document.documentElement.clientHeight获取。  当使用html5的时候，就会有documentElement在document下。  如上图所示 ， 左边为c
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
10-18
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
document.documentElement.clientHeight 与 document.body.clientHeight
E_li_na的博客
12-18 476
document.documentElement.clientHeight 与 document.body.clientHeight这两个是有区别的， 前一个是html标签，后一个是body标签。这两个是不同的东西，如果这两个的值返回相同的值，应该是设置了 body,html{ height: 100%} ...
document.body.clientHeight 和 document.documentElement.clientHeight的区别
生存不忘生活
12-16 1007
1.在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代doc
document.documentElement.clientHeight和document.body.clientHeight区别
weixin_33834679的博客
04-12 3081
首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点。 所有的HTML元素都是元素节点。 所有 HTML 属性都是属性节点。 文本插入到 HTML 元素是文本节点。are text nodes。 注释是注释节点。 Document 对象 当浏览器载入HT...
document.documentElement.clientHeight与document.body.clientHeight的区别
天空之上有座城
04-08 3217
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度 offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度 ...
document.documentElement.clientHeight与document.body.clientHeight的区别解析
qq_37734787的博客
03-21 1548
document.documentElement指的是元素 document.bodyt指的是元素 document.documentElement.clientHeight 屏幕可视区域高度
function appendFormScroll() { const formBox = document.getElementById('form-box') const formBoxHeight = formBox.getBoundingClientRect().top formBox.style.maxHeight = document.documentElement.clientHeight - formBoxHeight + 'px' }这个函数怎么用CSS实现
最新发布
08-07
可以使用 **CSS 的 `calc()` + `vh` 单位** 或 **Flexbox/Grid 布局** 替代 JavaScript 动态计算高度，使 `form-box` 自动填充剩余视口高度。以下是具体实现方案： --- ### 方案 1：CSS `calc()` + `vh`（简单场景） ```css #form-box { /* 假设 form-box 距离顶部 100px（需替换为实际值） */ max-height: calc(100vh - 100px); overflow-y: auto; /* 允许内容滚动 */ } ``` **适用场景**： - 当 `form-box` 的顶部距离固定（如导航栏高度已知）时。 --- ### 方案 2：Flexbox 布局（推荐） ```css body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } /* 假设顶部有固定高度的导航栏 */ .header { height: 60px; } #form-box { flex: 1; /* 自动填充剩余空间 */ overflow-y: auto; } ``` **优点**： - 自动适应动态内容，无需手动计算高度 - 兼容性良好（支持 IE10+） --- ### 方案 3：Grid 布局（现代浏览器） ```css body { display: grid; grid-template-rows: auto 1fr; /* 第一行自适应，第二行填充剩余空间 */ min-height: 100vh; margin: 0; } #form-box { overflow-y: auto; } ``` --- ### 方案 4：CSS 视口单位 + 变量（动态调整） 若 `form-box` 顶部距离需动态计算（如响应式布局）： ```css :root { --form-box-top: 100px; /* 通过 JS 动态更新此变量 */ } #form-box { max-height: calc(100vh - var(--form-box-top)); overflow-y: auto; } ``` **JavaScript 动态更新**： ```javascript document.documentElement.style.setProperty( '--form-box-top', document.getElementById('form-box').getBoundingClientRect().top + 'px' ); ``` --- ### 对比 JavaScript 与 CSS 实现 | 特性 | JavaScript (`appendFormScroll`) | CSS（Flexbox/Grid） | |--------------------|--------------------------------|---------------------| | **实时响应** | 需监听 `resize` 事件 | 自动响应 | | **性能** | 可能引起重排/重绘 | 浏览器优化 | | **代码复杂度** | 需手动计算逻辑 | 声明式布局 | | **兼容性** | 全兼容 | Flexbox（IE10+） | --- ### 注意事项 1. **滚动条处理**： - 确保 `overflow-y: auto` 或 `scroll` 生效。 2. **移动端适配**： - 使用 `min-height: 100dvh`（而非 `100vh`）解决移动浏览器视口问题。 3. **动态内容**： - 如果 `form-box` 上方元素高度变化，优先选择 Flexbox/Grid 而非 `calc()`。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值