当父元素只有'min-height”时，为什么'height: 100%”对子元素不起作用？

当父级只有 min-height/max-height 时，为什么子级高度失败，尽管 100%

在给定的 HTML 片段中，具有 min-height 的父容器元素: 300px 并且没有明确的高度值会导致子元素的 height: 100% 为失败。

理解行为

根据CSS规范：

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

在提供的场景中，容器元素的高度未明确定义。相反，它是根据其内容和最小高度值确定的。导致子元素的 height: 100% 无法准确计算。

需要显式高度

当在容器上设置高度值时，即使小到 1px，它也会显式地定义包含块的高度。这允许正确计算和应用子元素的 height: 100%，即使没有显式设置高度，也能填充整个容器。

替代方法

如果所需的行为是让子元素填充整个父元素，无论父元素的高度如何，一种替代方法是使用 CSS flexbox，例如：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child {
  height: 100%;
}

以上是当父元素只有'min-height”时，为什么'height: 100%”对子元素不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！