關(guān)于clientHeight、offsetHeight、scrollHeight

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

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

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

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

5. window.document.body.offsetHeight; ? ? 返回當(dāng)前網(wǎng)頁(yè)高度?

6. window.document.body.offsetWidth; ? ? 返回當(dāng)前網(wǎng)頁(yè)寬度?

我們這里說說四種瀏覽器對(duì) document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

?

clientHeight

大家對(duì) ? ? ?clientHeight ? ? ?都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁(yè)面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度，一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域，與頁(yè)面內(nèi)容無關(guān)。

offsetHeight

IE、Opera 認(rèn)為 ? ? ?offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。

NS、FF 認(rèn)為 offsetHeight ? ? ?是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。

scrollHeight

IE、Opera 認(rèn)為 ? ? ?scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。

NS、FF 認(rèn)為 scrollHeight ? ? ?是網(wǎng)頁(yè)內(nèi)容高度，不過最小值是 clientHeight。

?

簡(jiǎn)單地說：clientHeight ? ? 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。

NS、FF 認(rèn)為 offsetHeight 和 ? ? ?scrollHeight 都是網(wǎng)頁(yè)內(nèi)容高度，只不過當(dāng)網(wǎng)頁(yè)內(nèi)容高度小于等于 clientHeight 時(shí)，scrollHeight 的值是 ? ? ?clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 ? ? ?clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁(yè)內(nèi)容實(shí)際高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。

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

clientHeight與offsetHeight的區(qū)別

許多文章已經(jīng)介紹了clientHeight和offsetHeight的區(qū)別，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么組成的呢？如何計(jì)算這兩個(gè)數(shù)的值？

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

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

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

CSS中的Height值對(duì)clientHeight和offsetHeight有什么影響？

首先，我們看一下CSS中Height定義的是什么的高度。如在本文最后部分“APPENDIX示例代碼”（注：以下稱為“示例代碼”）中，innerDIVClass的Height值設(shè)定為50px，在IE下計(jì)算出來的值如下所示。也就是說，在IE里面，CSS中的Height值定義了DIV包括padding在內(nèi)的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定義的DIV實(shí)際內(nèi)容的高度，padding并沒有包括在這個(gè)值里面(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

?

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

如果CSS中Height值小于DIV要顯示內(nèi)容的高度的時(shí)候呢（當(dāng)CSS中沒有定義overflow的行為時(shí)）？在IE里面，整個(gè)clientHeight（或者offsetHeight）的值并沒有影響，DIV會(huì)自動(dòng)被撐大；而在Firefox里面，DIV是不會(huì)被撐開的。如在示例代碼中，將innerDivClass的Height值設(shè)為0，則計(jì)算結(jié)果如下所示。IE里面的DIV被撐開，其clientHeight值等于內(nèi)容的高度與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

本身是相對(duì)定位或絕對(duì)定位時(shí)，offsetTop?= 本身的margin-top + 本身的top值。