CSS 中百分比高度是如何計(jì)算的？為什么有時(shí)元素的高度會(huì)忽略直接父元素？

如何理解 css 中百分比高度的計(jì)算機(jī)制？

在 CSS 布局中，常常會(huì)遇到元素的高度設(shè)置為百分比，但其實(shí)際高度并不總是依據(jù)直接父元素的高度來(lái)計(jì)算。以下面的 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>

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

實(shí)際上，這是 CSS 中百分比高度計(jì)算的標(biāo)準(zhǔn)行為。當(dāng)一個(gè)元素的 height 屬性設(shè)置為百分比時(shí)，它會(huì)尋找最近的、具有明確設(shè)置高度的祖先元素作為參照。在上面的代碼中：

1. .box 元素設(shè)置了 height: 100%。
2. 其直接父元素
   沒(méi)有設(shè)置明確的高度。

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

由于 .box 的直接父元素沒(méi)有明確的高度設(shè)置，百分比高度計(jì)算會(huì)繼續(xù)向上查找，直到找到具有明確高度設(shè)置的祖先元素。在這個(gè)例子中，.box 最終參照的是 body 和 html 的高度。

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

的限制，可以通過(guò)給父元素

設(shè)置一個(gè)明確的高度來(lái)實(shí)現(xiàn)，例如：

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

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

因此，.box 元素的高度并不是“跳過(guò)”了上層元素，而是遵循了 CSS 中百分比高度計(jì)算的標(biāo)準(zhǔn)機(jī)制，即在沒(méi)有找到明確設(shè)置高度的父元素時(shí)，繼續(xù)向上尋找具有明確高度設(shè)置的祖先元素作為參照。