document.body.clientHeight返回值为0的解决方案

最新推荐文章于 2024-03-22 14:25:18 发布

_我就是愛自由

最新推荐文章于 2024-03-22 14:25:18 发布

阅读量1.6w

点赞数 2

分类专栏： javascript

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

最近在做一个div内容高度在不同浏览器下的高度自适应，发现document.body.clientHeight的返回值为0.

网上查了一下，貌似有很多个解决方案。

1. 使用document.documentElement.clientHeight获取。
当使用html5的时候，就会有documentElement在document下。

如上图所示，左边为chrome，右边为ie。
完全没办法兼容。。

2. 设置DOCTYPE为html4.
<!DOCTYPE HTML PUBLIC "-

经测试该方法可行。如图

这种情况只要使用document.body.clientHeight就行了。
但是我想使用html5来作为文档类型。

3. html5-> 设置html,body{height:100%}
在使用html5文档类型的时候，设置了html body的高度100%之后，两个浏览器就都能获取document.body.clientHeight了。

最后解决了问题，代码如下：

<script type="text/javascript">
     window.onload = function () {
         getHeight();//调用函数
     };
      function getHeight() {
          var menu_right = document.getElementById('menu-right');//获取menu-right的高度
          var body_height = document.documentElement.clientHeight;//document.body.clientHeight中在<!DOCTYPE html>声明下会返回0
          alert(body_height);
          menu_right.style.height = body_height + 'px';//将正文的高度赋值给menu-right
      }
  </script>

_我就是愛自由

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
document.body.clientHeight返回值为0的解决方案

最近在做一个div内容高度在不同浏览器下的高度自适应，发现document.body.clientHeight的返回值为0.网上查了一下，貌似有很多个解决方案。 1. 使用document.documentElement.clientHeight获取。当使用html5的时候，就会有documentElement在document下。如上图所示，左边为c
复制链接

扫一扫