如何理解 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 中百分比高度计算的标准机制，即在没有找到明确设置高度的父元素时，继续向上寻找具有明确高度设置的祖先元素作为参照。