使用'min-height”或'max-height”时，为什么'height: 100%”无法在没有父元素高度的子元素上工作？

为什么高度：100% 对孩子不适用，而没有高度值对具有最小/最大高度的父级

在某些情况下，当孩子元素设置为 height: 100% 并且它的父元素有一个min-height 或 max-height 值但没有明确的 height 值，孩子可能无法继承所需的高度。让我们通过 HTML、CSS 和相关 CSS 规范来深入研究此行为背后的原因。

考虑以下 HTML 和 CSS 代码：

<div class="container">
  <div class="child">
  </div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

问题：

在上面的示例中，当您在浏览器中查看此文档时，您可能会注意到子元素确实不要填满整个容器。尽管容器的最小高度为 300px，子元素的高度为 100%，但子元素仍然为空（没有任何可见高度）。

说明：

此行为源于 CSS 规范。规范指出：

“指定百分比高度。百分比是相对于生成的盒子的包含块的高度计算的。如果包含块的高度没有显式指定 （即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为“auto”。”

在我们的例子中，容器的高度没有明确指定。它由其内容决定，在本例中只是子元素。由于子元素没有明确的高度（由于百分比高度），因此容器的高度本质上是未定义的。因此，子元素的百分比高度也变得未定义。

要解决此问题并确保子元素填充整个容器，您必须显式设置容器的高度值，如下修改所示CSS:

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  height: 1px;
}

通过将容器的高度设置为一个很小的值（在本例中为 1px），您可以有效地为子元素的百分比高度提供参考高度。这允许子元素正确继承容器的高度，确保它填充整个容器。

以上是使用'min-height”或'max-height”时，为什么'height: 100%”无法在没有父元素高度的子元素上工作？的详细内容。更多信息请关注PHP中文网其他相关文章！