長島冰茶的工程師筆記

原文章連結：
http://sziyu.wordpress.com/2008/05/15/%e5%9b%9b%e7%a8%ae%e7%80%8f%e8%a6%bd%e5%99%a8%e5%b0%8d-documentbody-%e7%9a%84-clientheight%e3%80%81offsetheight-%e5%92%8c-scrollheight-%e7%9a%84%e8%a7%a3%e9%87%8b/

四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight 大家對 clientHeight 都沒有什麼異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態欄以上的這個區域，與 頁面內容無關。

offsetHeight IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。

scrollHeight IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。 NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。

簡單地說 clientHeight就是透過瀏覽器看內容的這個區域高度。 NS、FF 認為 offsetHeight 和 scrollHeight都是網頁內容高度，只不過當網頁內容高度小於等於 clientHeight 時，scrollHeight 的值是 clientHeight，而offsetHeight 可以小於 clientHeight。

IE、Opera 認為offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。 同理clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。