為什麼百分比高度在 CSS 中不像百分比寬度那樣運作？

CSS 中的百分比高度：解開謎題

使用CSS 時遇到的常見難題之一是寬度和百分比值之間的差異高度。雖然寬度的百分比值按預期工作，但高度卻並非如此。

假設您有兩個元素：#working 和 #not-working，每個元素都有指定的寬度和高度百分比值。 #working 元素的行為符合預期：其寬度為視窗的 80%。然而，#not-working 元素的高度仍然為 0，儘管設定為 30%。

塊元素的本質

要理解這個難題，我們需要深入研究 CSS 中塊元素的本質。預設情況下，區塊元素（例如

）根據其內容確定其高度。這意味著它們的高度會擴展以適應所包含內容的大小。

父子關係

使用百分比值設定區塊元素的高度時，我們引用元素的父容器。在#not-working 元素中，父級是視口，它沒有定義特定的高度。結果，父子之間存在無限的回饋循環，無法準確確定身高。

打破回饋循環

解決這個問題並允許百分比高度正常運行，我們必須透過為父元素提供特定的高度來打破回饋循環。這為計算子元素的百分比高度提供了一個固定的參考點。

總之，CSS 中的高度百分比值要求父元素具有定義的高度，以防止歧義並實現準確計算。如果沒有固定父元素的高度，子元素的高度保持為 0。

以上是為什麼百分比高度在 CSS 中不像百分比寬度那樣運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！