如何理解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。

这一切都只是我对我所看到的东西的解释。如果有人要纠正我，我会很高兴。