在學習 css 時，我們常常會遇到一些有趣的問題，比如如何讓一個內部的 div 元素充滿整個屏幕，即使它的直接父元素沒有設置高度。以下是一個這樣的例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body, html { height: 100%; } .box { height: 100%; background-color: green; border: 1px solid #000; } </style> </head> <body> <div class="box"></div> </body> </html>
在這個例子中，我們可以看到綠色的 .box 元素填滿了整個屏幕。這是為什么呢？
在 css 中，當我們給一個元素設置 height: 100% 時，這個元素會尋找已設置明確高度的最近祖先元素作為參照。在上面的代碼中，.box 設置了 height: 100%，它的直接父元素是一個沒有設置高度的
。因為父 沒有明確的高度，.box 的高度就繼續往上查找，最終參考了 和 的高度，這兩個元素都設置了 height: 100%。
因此，.box 的 height: 100% 實際上是相對于
和 的高度，而不是它的直接父 。這并不是 .box “跳過”了它的直接父元素，而是在 CSS 中百分比高度計算的標準機制下，尋找設置了明確高度的祖先元素作為參照。
如果你希望 .box 的高度受到其直接父
的限制，你可以給父 設置一個明確的高度，例如：
立即學習“前端免費學習筆記（深入）”；
<body style="height: 200px;"> <div class="box"></div> </body>
這樣，.box 的高度將會是 200px，而不是整個視窗的高度。
這種行為展示了 CSS 中百分比高度的層級引用機制，它不是”跳過”，而是當沒有找到明確設置高度的父元素時，繼續向上尋找參照物。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
