在学习 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
