使用「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:

透過將容器的高度設定為一個很小的值（在本例中為1px），您可以有效地為子元素的百分比高度提供參考高度。這允許子元素正確繼承容器的高度，確保它填充整個容器。

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

以上是使用「min-height」或「max-height」時，為什麼「height: 100%」無法在沒有父元素高度的子元素上運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！