clientHeight、offsetHeight、scrollHeight

我們這裡說說四種浏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這裡說的是 document.body，如果是 HTML 控件，則又有不同，點選這裡檢視。

這四種浏覽器分别為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 的解釋與上面相同，隻是把高度換成寬度即可。

說明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 則意義又會不同，在 XHTML 中這三個值都是同一個值，都表示内容的實際高度。新版本的浏覽器大多支援根據頁面指定的 DOCTYPE 來啟用不同的解釋器。下載下傳或浏覽測試檔案。