html/css基礎篇——關於瀏覽器window、document、html、body高度的探究

阿新 • • 發佈：2019-01-17

　　首先說明本人所理解的這幾個元素的計算

　　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高度是可視視窗高度，不包括瀏覽器滾動條。

　　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中測試也同樣適用。

　　這種分析最耗時間，如果大家覺得不錯就別光看不頂了。

　　如果覺得本文不錯，請點選右下方【推薦】！

html/css基礎篇——關於瀏覽器window、document、html、body高度的探究

html/css基礎篇——關於瀏覽器window、document、html、body高度的探究

一、HTML+CSS基礎知識學習筆記

Qt入門之基礎篇 ( 二 ) ：Qt項目建立、編譯、運行和發布過程解析

python之前端HTML/CSS基礎知識學習筆記

HTML+CSS基礎小筆記再整理

html+css基礎 - 個人備忘錄

html+css基礎總結

HTML+CSS基礎課程三

HTML+CSS基礎課程二

css基礎 BFC 不與浮動元素產生交集、自適應

HTML+CSS基礎

Web前端開發之HTML+CSS基礎入門(框架)

Web前端開發之HTML+CSS基礎入門(使用CSS樣式的方式)

html+css基礎部分01

HTML+CSS基礎知識個人筆記_8

HTML+CSS基礎知識個人筆記_7

HTML+CSS基礎知識個人筆記_6

HTML+CSS基礎知識個人筆記_5

HTML+CSS基礎知識個人筆記_4

HTML+CSS基礎知識個人筆記_3

html/css基礎篇——關於瀏覽器window、document、html、body高度的探究

相關推薦