如何理解 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 属性设置为百分比时，它会寻找最近的、具有明确设置高度的祖先元素作为参照。在上面的代码中：
- .box 元素设置了 height: 100%。
- 其直接父元素
没有设置明确的高度。
- body 和 html 元素都设置了 height: 100%。
由于 .box 的直接父元素没有明确的高度设置，百分比高度计算会继续向上查找，直到找到具有明确高度设置的祖先元素。在这个例子中，.box 最终参照的是 body 和 html 的高度。
如果我们希望 .box 的高度受到其直接父元素
的限制，可以通过给父元素设置一个明确的高度来实现，例如：<div style="height: 200px;"> <div class="box"></div> </div>
这样，.box 的高度将被限制在 200px，而不是整个视窗的高度。
因此，.box 元素的高度并不是“跳过”了上层元素，而是遵循了 CSS 中百分比高度计算的标准机制，即在没有找到明确设置高度的父元素时，继续向上寻找具有明确高度设置的祖先元素作为参照。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
