如何让内部div元素充满整个屏幕？CSS百分比高度

来源:php中文网 | 编辑:花韻仙語 | 时间:2025-04-22

在学习 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 中百分比高度的层级引用机制，它不是"跳过"，而是当没有找到明确设置高度的父元素时，继续向上寻找参照物。

如何让内部div元素充满整个屏幕？CSS百分比高度的层级引用机制是如何工作的？

上一篇：如何在 Bootstrap 4 中实现多项目轮播？

下一篇：为什么使用 position:absolute 和 position:relative 时会导

标签: 　　css 　　　　html 　　　　为什么　　