CSS 中百分比高度是如何計算的？為什么有時元素的高度會忽略直接父元素？

如何理解 css 中百分比高度的計算機制？

在 CSS 布局中，常常會遇到元素的高度設置為百分比，但其實際高度并不總是依據直接父元素的高度來計算。以下面的 html 和 CSS 代碼為例：

<meta charset="utf-8"></meta>  <style>   body,   html {     height: 100%;   }   .box {     height: 100%;     background-color: green;     border: 1px solid #000;   } </style>  <div class="box"></div>

在這個示例中，.box 元素的 height 設置為 100%，并顯示為綠色，覆蓋整個視窗。這種情況看起來像是 .box 元素的高度直接參考了 body 和 html 的高度，而忽略了其直接父元素的存在。

實際上，這是 CSS 中百分比高度計算的標準行為。當一個元素的 height 屬性設置為百分比時，它會尋找最近的、具有明確設置高度的祖先元素作為參照。在上面的代碼中：

1. .box 元素設置了 height: 100%。
2. 其直接父元素
   沒有設置明確的高度。

3. body 和 html 元素都設置了 height: 100%。

由于 .box 的直接父元素沒有明確的高度設置，百分比高度計算會繼續向上查找，直到找到具有明確高度設置的祖先元素。在這個例子中，.box 最終參照的是 body 和 html 的高度。

如果我們希望 .box 的高度受到其直接父元素

的限制，可以通過給父元素

設置一個明確的高度來實現，例如：

<div style="height: 200px;">   <div class="box"></div> </div>

這樣，.box 的高度將被限制在 200px，而不是整個視窗的高度。

因此，.box 元素的高度并不是“跳過”了上層元素，而是遵循了 CSS 中百分比高度計算的標準機制，即在沒有找到明確設置高度的父元素時，繼續向上尋找具有明確高度設置的祖先元素作為參照。