當父元素只有「min-height」時，為什麼「height: 100%」對子元素不起作用？

當父級只有min-height/max-height 時，為什麼子級高度失敗，儘管100%

在給定的HTML 片段中，具有min -height 的父容器元素: 300px 且沒有明確的高度值會導致子元素的height: 100% 為失敗。

理解行為

根據CSS規範：

「指定百分比高度。百分比是相對於生成的盒子包含塊的高度計算的如果包含塊的高度沒有明確指定（即，它取決於內容高度），且該元素不是。明確定義。相反，它是根據其內容和最小高度值確定的。導致子元素的 height: 100% 無法準確計算。

需要明確高度

當在容器上設定高度值時，即使小到 1px，它也會明確地定義包含區塊的高度。這允許正確計算和應用子元素的 height: 100%，即使沒有明確設定高度，也能填充整個容器。

替代方法

如果所需的行為是讓子元素填充整個父元素，無論父元素的高度如何，一種替代方法是使用CSS flexbox，例如：

以上是當父元素只有「min-height」時，為什麼「height: 100%」對子元素不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！