当父级只有'min-height”时，为什么我的子 Div 没有填充 100% 高度？

父子元素中的高度和百分比计算

考虑以下 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%;
}

儿童身高不响应

当容器元素具有 min-height 值时，尽管指定了 100%，子元素的高度仍保持为 0。然而，即使将容器元素的高度设置为 1px 这样的小值，也可以让子元素填充容器。

理解行为

这样做的原因行为取决于 CSS 中高度计算的本质。当父元素没有明确定义的高度（例如 min-height 的情况）时，其高度由其内容决定。在本例中，其内容是子元素。

但是，设置为 100% 的子元素的高度是相对于其包含块的高度计算的。由于包含块（父元素）没有显式指定高度，因此无法计算子元素的高度。

显式定义高度

设置父元素，即使是很小的值，也为包含块提供了确定的高度。这允许子元素将其高度计算为父元素高度的 100%。

关键要点：

百分比高度计算需要为包含块明确定义高度。如果包含块具有最小高度/最大高度值但没有高度值，则在显式定义包含块的高度之前不会应用子元素的高度。

以上是当父级只有'min-height”时，为什么我的子 Div 没有填充 100% 高度？的详细内容。更多信息请关注PHP中文网其他相关文章！