一 背景
本文不討論普通元素的大小和位置，僅僅討論頁面的大小和位置，而且為了簡化問題，本文只討論高度與頂部距離。筆者發現，頁面的寬度與高度的表現有很多不同，細心的朋友會發現，故頁面寬度另起文討論，文章已經寫好，見頁面寬度發微。
這裡說的頁面高度，是指瀏覽器頁面的高度。有以下四種元素能夠表現頁面的高度：window,html,document,body。這些元素的高寬常常不被人注意，卻經常使用，比如彈出層的置中，拖動層的拖動範圍，頁面配置等等問題都離不開頁面的高寬及定位。上面四個元素或對象中，window最為特殊，屬於javascript中的BOM系列，而html,document,body屬於javascript中的DOM系列。下面將分別討論。
二 我們關心那些高度？
在我看來，真正常用的頁面高度只有3個，這三個高度的確定可不是一件容易的事。本文的目的就是闡述並總結三個高度的取得。這三個值是：
1.視窗高度，就是我們一眼能看到的瀏覽器視窗中內容顯示的高度，隨著瀏覽器的縮放而改變。
2.文檔高度，由html頁面的實際內容決定，不收瀏覽器視窗的縮放而改變，包括我們看不見的捲軸的後面，如果瀏覽器內容區是一頁白紙，將白紙完全攤開，其高度就是文檔高度。
3.被捲起的高度，當頁面出現垂直捲軸，並且頁面下拉了一部分，這時頂端會因為捲軸而隱藏一些高度，該值在調適型配置時具有重要意義，姑且稱為被捲起的高度。
以上三個值或許是我們真正關心的，在布局，定位，自適應，拖動，彈出層等前端技術上具有價值，而由於瀏覽器的差異，其取值方法標準不一，常常讓人痛苦不堪。jQuery面世之後，號稱一統天下，筆者仔細研究之後，發現jQuery對這三個值也不是完全統一的。
三 window
window是什麼呢？window就是視窗，在DOM樹產生之前就有了，可以說是瀏覽器天生的，即使沒有後來的js,html,document,body等概念的混淆，window依然是存在的，就像是一個普通的win32程式視窗，這個win32程式的width,height是什麼，這個就很好理解了，就是我們能看到了width,height。在瀏覽器中，window對象專指頁面視窗。所以window對象能對大小定位有作用的只用這兩個屬性。而且這兩個屬性永遠會真實的反映頁面視窗的高寬。而window原生並沒有width,height屬性，而有一堆雜亂的屬性，為何會如何安排，以後起文專題。所以建議使用jQuery的$(window)的height(),width()方法，這個方法忠實的反映了頁面的視窗大小，並且能隨著瀏覽器縮放而改變。
window的高度表現出來，還有scrollTop()等函數，這些方法本不應該屬於window對象，jquery為了封裝，故如此。jQuery在這裡做的很好，$(window).scrollTop（）的值真實的反映了上文所述“被捲起的高度”，可貴的是，在IE6到chrome的所有瀏覽器中，表現都是一致的。
這樣，我們初戰告捷，一舉掌握了三個高度中兩個值擷取的方法。歸納起來是：
1.視窗高度，$(window).height()
2.被捲起的高度，$(window).scrollTop()
不要小看這個結果，也是我們苦苦甄別之下才得出的結果。到後面我們會發現，以下各值也能反映視窗高度：
1.Firefox下document.documentElement的clientHeight，(document.documentElement即html元素)
2.chrome下的document.documentElement的clientHeight，
3.IE 7 8 9下的document.documentElement的clientHeight,
4.IE6下的document.body的clientHeight,
看的出來，大統一中有一個IE6作亂，於是還是取$(window).height()的值更加統一。
能反映被捲起的高度的值也非常多，多而易亂，讓人眼花，以下各值也能反映被捲起的高度：
1.Firefox下的$(document.documentElement).scrollTop(),
2.Firefox下的$(document).scrollTop(),
3.Firefox下的document.documentElement.scrollTop,
4.Chrome下的$(document).scrollTop(),
5.Chrome下的$(document.body).scrollTop(),
6.Chrome下的document.body.scrollTop,
7.IE6下的$(document).scrollTop(),
8.IE6下的$(document.body).scrollTop(),
9.IE6下的document.body.scrollTop,
10.IE7下的$(document.documentElement).scrollTop(),
11.IE7下的$(document).scrollTop(),
12.IE7下的document.documentElement.scrollTop,
13.IE8下的$(document.documentElement).scrollTop(),
14.IE8下的$(document).scrollTop(),
15.IE8下的document.documentElement.scrollTop,
由此可見，除了$(window).scrollTop()能真實反映被捲起的高度之外，還有一個也可以，即$(document).scrollTop(),而在原生的scrollTop值中，沒有統一的值。建議使用$(window).scrollTop()的值，便於記憶。$(document).scrollTop()便於理解，因為捲起畢竟是由於文檔在視窗中放不下而產生的。
四 Html
所有瀏覽器都支援document,要說清楚document的前生後世，就要從文檔說起。html頁面的本質就是一棵樹。根節點就是document。document和DOM
JS中規定的HtmlElement對象一樣，也有表達高度和位移的屬性。所有HtmlElement的元素都有幾個屬性：
offsetHeight:元素所佔高度；
offsetTop:元素上邊框到父元素上邊框的距離；
clientHeight:元素的客戶區高度，就是offsetHeight減掉邊框的值；
scrollHeight:元素有垂直捲軸時，元素鋪開的高度，即內容的真實高度。
scrollTop:因垂直方向的捲軸，而在頂端被隱藏的距離。
第一個HtmlElement元素就是html，取得方法為document.documentElement不要感到驚訝，確實是這樣。我們來觀察一下html頁面的基本結構：
<html>
<head></head>
<body></body>
</html>
從此可以看出<html></html>是一個元素，並且是網頁的第一個元素。document.documentElement.offsetHeight,offsetTop,clientHieight,scrollHeight,scrollTop等都有值，但是在各瀏覽器上表現不一。offsetHeight的基本含義是：整個網頁的高度，即完全鋪開的高度。還有一個值$(document.documentElement).height()的值在各瀏覽器下表現也是不一的，所以該值不再深究。
五 Document
關於document的高度，是jQuery封裝的，應為document本身不是一個HtmlElement對象，但是這個封裝的值非常準確，而且在各瀏覽器下表現完全一致。所以$(document).height()的值非常可靠，能真實的反映前面所提的"文檔高度"，所以我們又發現了一個值，即
1.文檔高度，$(document).height()
六 Body
body的高寬經常被使用，作為頁面高度的代表。但是，經過筆者仔細研究，發現body能反映的一些高度值在各瀏覽器下表現讓人不滿， 本文前面提到的三個目標值都已經獲得了，再說說body也無妨，但是body的高度相關值大可不必使用。
body.offsetHeight的值是如何計算的？又是我們發現該值比document.documentElement.offsetHeight的值要小，為何？body.offsetHeight的值永遠不會超過document.documentElement.offsetHeight，我們知道，html元素表現的是文檔的高度，是被撐出來的。而body的高度不是這樣計算的，body的高度其實是文檔所佔用的高度，兩者微妙的差距就在於：後者忽略了頂部塊元素的margin-top和底部塊元素的margin-bottom。這個結論符合offsetHeight的原始意義，在上文元素大小和位置中已有闡述，offsetHeight表達的是元素所佔的高度，含padding,height,border等，而margin是個定位的概念，與元素所佔高度無關。
如果是普通元素，我們會關心元素所佔高度offsetHeight,但是body的offsetHeight屬性工作表達的值，一般不是我們想要的。
七 總結
綜上所述，我們關心的三個頁面高度都有了取值方法，總結為：
1.視窗高度，$(window).height()
2.文檔高度，$(document).height()
3.被捲起的高度，$(window).scrollTop()
八 樣本
本文的所以樣本在：http://www.zangb.com/html/demo/css/css_pageHeight.html
方勁松 南京焦點科技 寫於鼓樓清涼山 2012-8-15
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
