高度为 100% 的 html、body 和 div

Question

我有很多内容延伸到了屏幕底部。在页面顶部，我有一个包含“英雄形象”的 div。 div 填充屏幕的高度。我通过设置实现了这一点:

html, body { height: 100%; }
.hero_div { height: 100%; }

但我不明白为什么会这样。

如果我从正文中删除 100% 的高度，则高度为 3978 像素(整个页面/内容的高度)。但是当高度为 100% 时，body 的高度只有 653 像素(屏幕的高度)，但是低于这个 653px 的内容仍然显示。

高度为 100% 的 body 是否应该是 body 标签内所有内容/页面的高度(在本例中为 3978px)？

Answer 1

Surely body with height 100% should be the height of all the content/page within the body tag

没有。 height: 100% 表示“元素内容高度的 100%”，而不是“元素内容高度的 100%”。

HTML 元素的容器(实际上)是视口(viewport)。

but the content below this 653px is still displayed.

overflow 的默认值不是hidden。