首先說明本人所理解的這幾個元素的計算
window高度應當是文檔所在窗口的可視高度（沒有包括瀏覽器的滾動條），計算方法document.documentElement.clientHeight
document高度應該為文檔內容的高度，計算方法Math.max(document.body[ "scrollHeight" ], document.documentElement[ "scrollHeight"])
html高度應當為html元素的高度（包括邊框滾動條）,計算方法htmlElement.offsetHeight
body高度是body元素的高度（包括邊框滾動條），計算方法bodyElements.offsetHeight;
以上測試方式和jQuery的處理相同。直接使用jQuery來測試。
用例：
注意：里面的#absolute是脫離文檔流的元素。
測試必要條件：
1.所有測試都在沒有設定margin/padding為整數的情況下測定。
2.其中細節高度筆者使用QQ截圖工具取像素對比
<!DOCTYPE html> <html lang="ch-cn"> <head> <meta charset="utf-8"> <script type="text/javascript" src='jquery-1.9.1.js'></script> <style type="text/css"> html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; } #absolute{ position: absolute; margin-left: 300px; height: 500px; width: 500px; background: #ff0; } #normal{ height: 300px; width: 300px; background: #f00; } </style> </head> <body> <div id='absolute' >我是absolute</div> <div id="normal">我是normal</div> <script type="text/javascript"> function show(){ console.log("window height " + $(window).height()); console.log("document height " + $(document).height()); console.log("html height " + $("html").height()); console.log("body height " + $("body").height()); } </script> </body> </html>
顯示效果為
第一組測試：IE8
IE8總結:
window可視窗口高度，不包括瀏覽器滾動條（IE后面兩個圖對比可得，第二個IE下面有個滾動條占6px）。IE有一個特點：window高度與真正的可視窗口相比會少4px（第三個IE圖片可知，這個時候document的高度和可視窗口高度相同），說明IE的window四邊有2px的間隙，也就是IE自己的offset值。
document文檔高度，完全顯示所有文檔內容的高度(包括脫離文檔流的元素顯示，第一個IE圖可得)和IE工作區（看html解釋）取最大值（這個高度最終決定窗口滾動條能滾動顯示到哪里）
html高度是窗口的高度，這個窗口是IE自己划定的瀏覽器工作區域高度，包括可視窗口、2px的offset、瀏覽器滾動條等等，看下面的效果圖
body高度是內容真實高度（脫離文檔流定位的不再里面，三個圖可以為此作證）
第二組測試：IE9+
IE9+總結：
window高度是可視窗口高度，不包括瀏覽器滾動條。
document文檔高度，完全顯示所有文檔內容的高度(包括脫離文檔流的元素顯示，第一個IE圖可得)和IE工作區（看html解釋）取最大值（這個高度最終決定窗口滾動條能滾動顯示到哪里）
html高度是窗口的高度，這個窗口是IE自己划定的瀏覽器工作區域高度，包括可視窗口、瀏覽器滾動條，比IE8要標准一些（沒有offset了，滾動條和工作區邊也沒有了間隙，看下圖）
body高度內容真實高度（脫離文檔流定位的不再里面）
第二組測試：chrome
chrome總結：
window高度是可視窗口高度，不包括瀏覽器滾動條。
document高度是完全顯示所有文檔內容的高度(包括脫離文檔流的元素顯示，第一個chrome圖可得)和可視窗口高度取最大值（這個高度最終決定窗口滾動條能滾動顯示到哪里）
html高度和body內容高度相同
body高度內容真實高度（脫離文檔流定位的不再里面）
第三組測試：Firefox
Firefox總結：
window高度是可視窗口高度，不包括瀏覽器滾動條。
document高度是完全顯示所有文檔內容的高度(包括脫離文檔流的元素顯示，第一個Firefox圖可得)和可視窗口高度取最大值（這個高度最終決定窗口滾動條能滾動顯示到哪里）
html高度和body內容高度相同
body高度內容真實高度（脫離文檔流定位的不再里面）
好了，總結一下：
window高度是可視窗口高度，不包括瀏覽器滾動條高度。比較特別的是IE8的可視窗口邊上有2px的offset，所以IE8的可視窗口高度會比我們看到的窗口要小4px。
document高度是完整文檔高度，這個高度計算根據瀏覽器不同而不同：標准瀏覽器document高度 = max(文檔真實完整高度【包括脫離文檔流的元素的顯示】,可視窗口高度）；IE瀏覽器document高度 = max(文檔真實完整高度【包括脫離文檔流的元素的顯示】,IE工作區高度【需要注意的是iframe可以設置高度，這個高度就是工作區高度，所以IE工作區高度完全可能是高於整個顯示屏高度的】)
html高度分兩種：標准瀏覽器html高度=body內容高度；IE瀏覽器html高度 = IE工作區高度（具體查看IE的分析）；
body高度是內容真實高度（脫離文檔流定位的不再里面）。
當然上面的分析沒有計算偏移margin和padding在內。比如標准的瀏覽器html高度=html的padding高度+body內容的偏移margin高度+body內容高度
對比總結中可以看出，IE和標准瀏覽器區別最大的是document和html的計算方法。有一點要說明的是，IE的documen高度因為可能是IE工作區高度，那么可能會包括滾動條，如IE9+測試的第二個圖可以看出。
上面的測試結果在,iframe中測試也同樣適用。
這種分析最耗時間，如果大家覺得不錯就別光看不頂了。