document.body.clientHeight获取可视区域高度为0问题解决

于 2023-10-24 15:13:20 发布
阅读量398 收藏
点赞数 1
分类专栏： 菜鸟的踩坑之旅 文章标签： clientHeight 高度 可视区域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieyucx/article/details/134013049
版权

问题描述
document.body.clientHeight获取可视区域高度为0
代码如下：

            // 获取视口宽高
            const currentWidth = document.body.clientWidth
            const currentHeight = document.body.clientHeight
            console.log('视口宽高', currentWidth, currentHeight )

打印出来的currentHeight是0
在这里插入图片描述
解决方案1
使用如下代码获取

const currentHeight = document.documentElement.clientHeight；

解决方案2
为body加上如下css

<body style="position: absolute; height: 100%;">
	...
</body>
jieyucx
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
doctype后如何获得body.clientHeight的方法
12-02
在ie6中很多js脚本执行就会出现问题，一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。 因为在加了doctype后，在ie6中这些document.body的属性已经重新分配给了document.documentElement。 比如：原来document.body.clientHeight，就要改成document.documentElement.scrollTop 为了自适应，可以改了下代码： ((docum
由document.body和document.documentElement想到的
09-06
3. `document.body.scrollWidth`和`scrollHeight`表示元素的实际内容宽度和高度，即使内容超过了可视区域。 4. `document.body.scrollTop`和`scrollLeft`分别表示垂直和水平方向上的滚动量。 此外，`window`对象...
【HTML5】关于document.body.clientHeight返回值为0的解决方案
Duawieh的博客
07-29 1160
网上关于此问题的其中一种解决方案是使用HTML4，但是如果我们希望在保持HTML5版本不变的前提下解决此问题呢？标签添加上文所述样式即可，添加样式的方式不限，然后我们就可以在 Javascript 中正常调用了。这里引用一下@kelly0721的博客中的图片，为各位展示一下我们可以获取的各种屏幕元素尺寸。可见其正常输出了页面可见区域高度，并且能够随屏幕缩放实时地得到不同的值。正是浏览器页面可见区域的高度。
解决VUE中document.body.scrollTop为0的问题
10-18
今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[JS]document.body.clientHeight的取值
weixin_30550271的博客
01-05 199
有时候需要取页面的底部, 就会用到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 493
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
document.body.clientHeight返回值为0的解决方案
热门推荐
web前端菜鸟工程师
01-12 1万+
最近在做一个div内容高度在不同浏览器下的高度自适应，发现document.body.clientHeight的返回值为0. 网上查了一下， 貌似有很多个解决方案。  1. 使用document.documentElement.clientHeight获取。  当使用html5的时候，就会有documentElement在document下。  如上图所示 ， 左边为c
关于document.body.clientHeight的返回值为0的问题
Panda0218的博客
01-14 3603
有时候我们需要去获取body的高度，但是通过document.body.clientHeight却得到值是0。那么如何解决这个问题呢？ 我们只需要将html和body的css样式中添加属性height:100%;即可。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;titl...
document.documentElement和document.body区别介绍
09-05
在这个模式下，document.documentElement的clientHeight可能返回0，而document.body的clientHeight则可以获取到可视区域的高度。在有DTD声明的情况下，浏览器会采用标准模式。在这个模式下，document....
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
10-27
通常情况下，如果需要使用jQuery框架来实现相关功能，可以利用jQuery提供的尺寸获取方法，如$(window).height()和$(window).width()来获取浏览器窗口的可视区域高度和宽度。$(document).height()和$(document).width...
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
11-23
JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中，获取当前页面的可视高度和宽度，以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...
document.body.clientHeight 取高度出错问题
yaoyanzhu的博客
05-08 1598
  有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可是在XHTML中, 如果body 体中只有一行, 则docu...
关于JavaScript中document.body.clientHeight获取页面高度为0的问题及解决方案
chad273的博客
01-03 3314
js中如下语句 h = document.body.clientHeight； 获得的 h 值始终为0，找了半天终于解决，将代码改写如下即可： h = document.documentElement.clientHeight； 初学js，具体原因还不懂，貌似和DOM中从层次不同有关，有待继续学习研究。同时希望大神帮忙解答。 ...
document.body.clientHeight
weixin_30278311的博客
03-03 86
document.body.clientWidth ==> BODY对象宽度（也是可见区） document.body.clientHeight ==> BODY对象高度（也是可见区） document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见...
React开发（235）:document.body.clientHeight
歌谣的博客
10-31 376
document.body.clientHeight获取可视化高度
基于ssm的毕业论文管理系统设计与实现.docx
最新发布
09-09
基于ssm的毕业论文管理系统设计与实现.docx
这个什么意思function getViewportHeight() { if (window.innerHeight!=window.undefined) return window.innerHeight; if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight; if (document.body) return document.body.clientHeight; return window.undefined; }
06-06
这是一个 JavaScript 函数，用于获取当前浏览器窗口的可视高度。函数内部的逻辑如下： 1. 首先判断浏览器是否支持 window.innerHeight 属性，如果支持则返回该属性值。 2. 如果不支持 window.innerHeight 属性，则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值