在学习 css 时，我们常常会遇到一些有趣的问题，比如如何让一个内部的 div 元素充满整个屏幕，即使它的直接父元素没有设置高度。以下是一个这样的例子：
在这个例子中，我们可以看到绿色的 .box 元素填满了整个屏幕。这是为什么呢？
在 CSS 中，当我们给一个元素设置 height: 100% 时，这个元素会寻找已设置明确高度的最近祖先元素作为参照。在上面的代码中，.box 设置了 height: 100%，它的直接父元素是一个没有设置高度的 。因为父 没有明确的高度，.box 的高度就继续往上查找，最终参考了 和 的高度，这两个元素都设置了 height: 100%。
因此，.box 的 height: 100% 实际上是相对于 和 的高度，而不是它的直接父 。这并不是 .box "跳过"了它的直接父元素，而是在 CSS 中百分比高度计算的标准机制下，寻找设置了明确高度的祖先元素作为参照。
如果你希望 .box 的高度受到其直接父 的限制，你可以给父 设置一个明确的高度，例如：
立即学习“前端免费学习笔记（深入）”；
这样，.box 的高度将会是 200px，而不是整个视窗的高度。
这种行为展示了 CSS 中百分比高度的层级引用机制，它不是"跳过"，而是当没有找到明确设置高度的父元素时，继续向上寻找参照物。
