在我看《JavaScript高級程序設計》（第三版）的時候，在clientHeight和scrollHeight那部分把我弄糊塗了。
原書是這樣寫的：（ //寬度同理，就不仔細描述了。）
“對於不包含滾動條的頁面來說,scrollHeight和clientHeight之間的關系不明確。在基於document.docuemntElement查看模式下，各個瀏覽器表現出不一樣的性質。
- 在FF下，這兩組屬性始終相等，是文檔實際大小，非視口大小。
- 在Opera、safari、Chorme中，scrollHeight是視口大小，而clientHeight是文檔大小。
- 在IE非標准模式中，scrollHeight是文檔大小，clientHeight是視口大小。”
經過我親手實驗，我把結論寫在下面。
先新建一個文檔，並通過樣式表，讓文檔高度等於3000px
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 body{ height: 3000px;} //讓文檔的大小產生滾動條，高度為3000px; 6 </style> 7 </head> 8 <body> 9 10 </body> 11 </html>
接着就是實驗環節
1 <script> 2 window.onload = function(){ 3 //大於IE7，safari,ff,chorme都顯示為視口大小，隨瀏覽器縮小而減小 4 alert(document.documentElement.clientHeight); 5 //始終等於文檔的大小，小於IE7的顯示為視口大小。 6 alert(document.documentElement.scrollHeight); 7 } 8 </script>
接着測試了一下基於document.body的模式下，無論大部分都是顯示為body元素的height，3000px；
在IE下，document.body.clientHeight為3000，scrollHeight則不是。（要兼容低版本IE確實要一番功夫）
綜上所述，在我們要獲取文檔實際高度時，最好用document.documentElement.scrollHeight。
在我們要獲取視口實際高度時，用document.documentElement.clientHeight。