document.body.clientHeight返回值為0的解決方案
阿新 • • 發佈：2019-01-28
最近在做一個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>