關于clientHeight、offsetHeight、scrollHeight

1. window.screen.availWidth ? ? 返回當前屏幕寬度(空白空間)?

2. window.screen.availHeight ? ? 返回當前屏幕高度(空白空間)?

3. window.screen.width ? ? 返回當前屏幕寬度(分辨率值)?

4. window.screen.height ? ? 返回當前屏幕高度(分辨率值)?

5. window.document.body.offsetHeight; ? ? 返回當前網頁高度?

6. window.document.body.offsetWidth; ? ? 返回當前網頁寬度?

我們這里說說四種瀏覽器對 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 的解釋與上面相同，只是把高度換成寬度即可。

=======================================================================

clientHeight與offsetHeight的區別

許多文章已經介紹了clientHeight和offsetHeight的區別，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么組成的呢？如何計算這兩個數的值？

?clientHeight和offsetHeight的值由什么決定？

假如我們有以下的DIV，主要顯示的文字為"This ? ? ?is the main body of DIV"。

如上圖所示，clientHeight的值由DIV內容的實際高度和CSS中的padding值決定，而offsetHeight的值由DIV內容的實際高度，CSS中的padding值，scrollbar的高度和DIV的border值決定；至于CSS中的margin值，則不會影響clientHeight和offsetHeight的值。

CSS中的Height值對clientHeight和offsetHeight有什么影響？

首先，我們看一下CSS中Height定義的是什么的高度。如在本文最后部分“APPENDIX示例代碼”（注：以下稱為“示例代碼”）中，innerDIVClass的Height值設定為50px，在IE下計算出來的值如下所示。也就是說，在IE里面，CSS中的Height值定義了DIV包括padding在內的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定義的DIV實際內容的高度，padding并沒有包括在這個值里面(70 ? ? ?= 50 + 10 * 2)。

in IE:?

innerDiv.clientHeight:?46
innerDiv.offsetHeight:?50
outerDiv.clientHeight:?0
outerDiv.offsetHeight:?264
in?Firfox:
innerDiv.clientHeight:?70
innerDiv.offsetHeight:?74
outerDiv.clientHeight:?348
outerDiv.offsetHeight:?362

?

在上面的示例中，也許你會很奇怪，為什么在IE里面outerDiv.clientHeight的值為0。那是因為示例代碼中，沒有定義outerDIVClass的Height值，這時，在IE里面，則clientHeight的值是無法計算的。同樣，在示例代碼中，如果將innerDIVClass中的Height值去年，則innerDIV.clientHeight的值也為0。(注：在Firefox下不存在這種情況)。

如果CSS中Height值小于DIV要顯示內容的高度的時候呢（當CSS中沒有定義overflow的行為時）？在IE里面，整個clientHeight（或者offsetHeight）的值并沒有影響，DIV會自動被撐大；而在Firefox里面，DIV是不會被撐開的。如在示例代碼中，將innerDivClass的Height值設為0，則計算結果如下所示。IE里面的DIV被撐開，其clientHeight值等于內容的高度與padding*2的和；而Firefox里面，文字將溢出DIV的邊界，其clientHeight值正好是padding值的兩倍。

In?IE:
innerDiv.clientHeight:?38
innerDiv.offsetHeight:?42
outerDiv.clientHeight:?0
outerDiv.offsetHeight:?256
In?Firefox:
innerDiv.clientHeight:?20
innerDiv.offsetHeight:?24
outerDiv.clientHeight:?298
outerDiv.offsetHeight:?312

本身是相對定位或絕對定位時，offsetTop?= 本身的margin-top + 本身的top值。