document.body.clientHeight返回值为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>

猜你喜欢

转载自blog.csdn.net/u010359143/article/details/50501991