我如何理解html页面尺寸？

Question

从第一天开始，这对我来说一直是个谜。它仍然是。现在是揭示它的时候了。所以我创建了一个test page，其中包含div，您可以更改这些范围。以及显示相关属性值的信息面板。为简单起见，我们只需使用Chrome。

默认body页边距为8px。 html的背景为蓝色，body为绿色，div为红色。在这里，我们可以看到html的{​​{1}}等于offsetHeight，就像它只是包围body.offsetHeight + 2 * body.margin一样。但是body == html.clientHeight，好像它被拉伸以填充视口。

现在让我们添加水平滚动条（使window.innerHeight的宽度为div），并向右滚动一点：

1000px和html向左移动。 body的{​​{1}}更改与body同步，就好像它拥有滚动条一样。由于添加了滚动条，scrollLeft的{​​{1}}发生了变化。

让我们反过来做（垂直滚动条）：

现在两个window.pageXOffset的范围都已更改（html和clientHeight）。这表明它不拥有滚动条。

最后，使用两个滚动条：

嗯，此时事情对我来说或多或少clear。至少只要我们只考虑Chrome。但是还有一些我想知道的事情。

• 为什么html的{​​{1}}可能会少于offsetWidth？有没有更好的解释而不是“就是这样”？

• 为什么clientWidth的{​​{1}} / html会在滚动页面时发生变化？它不拥有滚动条，是吗？

此外还会有一些摘要。

Answer 1

因此，在视口（窗口）中显示了一个画布。在画布上，我们有clientHeight元素，其中包含offsetHeight。他们大多像body，但有一些怪癖：

• 默认情况下，沿着X轴scrollLeft元素（scrollTop）伸展以适合视口。可能不是怪癖。视口是html的容器。而作为一个普通的body，它默认适合容器宽度（不包括滚动条）。

• div的高度与适合html元素一样大。但由于某种原因，它的width: auto等于视口高度减去滚动条。就像它伸展以适应沿Y轴的视口一样。

• html的{​​{1}} / div属性镜像视口的html / body

• clientHeight的上边距不会因body的

  而崩溃

• scrollLeft没有显示拉伸到视口底边的迹象，除非您有例如设置了scrollTop属性的绝对定位元素。从pageXOffset值判断，pageYOffset作为一个元素，相对于默认情况下呈现绝对定位的元素（除非层次结构中有其他绝对定位的元素）

使用Firefox，区别在于body的{​​{1}} / html属性镜像了视口的body / bottom。

这一切只是我对所看到的内容的解释。如果有人要纠正我，或者加上我的发现，我会很高兴。