最近在做一个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>