如何理解html頁面尺寸？

Question

從第一天開始，這對我來說就是個謎。它依然如此。現在是揭示它的時候了。所以我做了一個test page，其中包含一個div，這個範圍可以改變。信息面板顯示相關屬性的值。爲簡單起見，我們只需使用Chrome。

默認body餘量8px。 html的背景爲藍色，body的綠色，div爲紅色。在這裏我們可以看到html的offsetHeight等於body.offsetHeight + 2 * body.margin，好像它只是包含body。但是html.clientHeight == window.innerHeight，好像它被拉伸以填充視口。

現在讓我們添加水平滾動條（請div的寬度1000px），並滾動到右側位：

html和body向左移動。 body的scrollLeft與window.pageXOffset同步更改，就像它擁有滾動條一樣。由於添加了滾動條，html的clientHeight發生了變化。

讓我們做它的其他方式（垂直滾動條）：

現在無論html的程度變化（offsetWidth和clientWidth）。這表明它不擁有滾動條。

最後，既有滾動條：

好了，在這一點上的東西都或多或少clear給我。至少只要我們只考慮Chrome。但仍然有一些我想知道的事情。

• 爲什麼html的clientHeight都不可能小於offsetHeight？有沒有比「只是如此」更好的解釋？

• 爲什麼body的scrollLeft/scrollTop在我滾動頁面時發生了變化？它不擁有滾動條，是嗎？

此外，一些總結將就位。

Answer 1

因此，在視口（窗口）中顯示一個畫布。在畫布上我們有html元素，其中包含body。他們大多喜歡div S，但有一些怪癖：在默認情況下（width: auto）

• html元素拉伸以適應視口。不是一個怪癖可能。視口是html的容器。而作爲一個普通的div它默認情況下適合容器寬度（不包括滾動條）。

• html的高度大到適合body元素。但由於某種原因，其clientHeight等於視口高度減去滾動條。就好像它沿着Y軸伸展以適合視口一樣。

• body的scrollLeft/scrollTop特性反映視口的pageXOffset/pageYOffset

• body的上邊距不符合的一個

• bodyhtml崩潰顯示沒有延伸至底部的跡象除非您擁有例如絕對定位的元素，並且bottom屬性被設置，否則視口的邊緣。從offsetParent值，body充當元件，相對於該絕對定位元件由缺省呈現（除非有其他絕對定位元素層次結構向上）

與Firefox所不同的是它的html的判斷scrollLeft/scrollTop鏡像視口的屬性pageXOffset/pageYOffset。

這一切都只是我對我所看到的東西的解釋。如果有人要糾正我，我會很高興。