在某些情況下，當孩子元素設定為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中文網其他相關文章！
