為什麼 CSS 中的百分比高度不能如預期般運作？

為什麼百分比高度在 CSS 中不起作用？

在使用百分比時，了解 CSS 中塊元素的固有行為至關重要 -為基礎的尺寸。雖然百分比寬度按預期發揮作用，但百分比高度表現出矛盾的行為，可能會讓開發人員感到困惑。

預設高度決定

預設情況下，區塊元素的高度為由其內容決定。換句話說，元素將垂直擴展以適應其內容所需的高度。這與 width 屬性不同，width 屬性本質上會水平擴展元素以填滿其父級中的可用空間。

百分比悖論

當使用百分比來定義時元素的高度，它表示父元素高度的百分比。但是，由於父元素的高度通常取決於其子元素的高度，因此會建立反饋循環。將子元素的高度設定為百分比並不能提供可使用的具體值，因為它依賴父元素的高度，而父元素的高度又依賴子元素的高度。此循環會阻止建立明確定義的維度。

內容驅動的高度

與獨立於內容的寬度相比，高度直接受元素包含的內容。這種依賴性使得必須為父元素提供特定的高度值，從而打破回饋循環並為子元素的百分比高度提供具體的參考點。

說明範例

考慮以下程式碼：

<div>
<pre class="brush:php;toolbar:false">#inner {
  height: 50%;
}

在此範例中，高度#inner 將取決於#outer 的高度。然而，#outer 的高度也取決於#inner 的高度。如果不指定 #outer 的高度，回饋循環將阻止 #inner 具有明確定義的高度。