當父級只有「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%;
}

考慮以下 HTML 和 CSS 設定：

兒童身高不回應

當容器元素具有 min-height 值時，儘管指定了 100%，子元素的高度仍保持為 0。然而，即使將容器元素的高度設定為 1px 這樣的小值，也可以讓子元素填滿容器。

理解行為

這樣做的原因行為取決於 CSS 中高度計算的本質。當父元素沒有明確定義的高度（例如 min-height 的情況）時，其高度由其內容決定。在本例中，其內容為子元素。

但是，設定為 100% 的子元素的高度是相對於其包含區塊的高度計算的。由於包含區塊（父元素）沒有明確指定高度，因此無法計算子元素的高度。

明確定義高度

設定父元素，即使是很小的值，也為包含區塊提供了確定的高度。這允許子元素將其高度計算為父元素高度的 100%。

關鍵要點：

百分比高度計算需要為包含區塊明確定義高度。如果包含區塊具有最小高度/最大高度值但沒有高度值，則在明確定義包含區塊的高度之前不會套用子元素的高度。

以上是當父級只有「min-height」時，為什麼我的子 Div 沒有填充 100% 高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！