html - Div 没有占据其父级的全高，定位为 `vh` 统一？

Question

我必须说这不是什么大问题，但它很奇怪!

我有一个带有 min-height: 50vh; css 的 section 元素。在它里面有一个包含一些内容的 div。即使在为 div 设置了 height: 100%; 之后，它仍然没有占据其父级的全部高度； 部分。这就是我不明白的原因!？!

一个解决方案是给 section 一个相对位置，给 div 一个绝对位置，并设置 top, bottom, left, and right到 0。但我非常想知道为什么会发生这种行为？!

谢谢!

Answer 1

block 显示元素(即 div)将占据其父元素的整个宽度，但不会占据其父元素的整个高度。默认情况下， block 显示元素的高度由其内容的高度定义。

如果您确实希望您的 div 占据相对于父容器的完整高度，您可以在 CSS 中显式设置它的高度。如果您将高度设置为 100%，那么它实际上将占据其父项的完整高度，而不管它是子项。