极客观点
项目管理
HarmonyOS
<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>
<div class="box"></div>
</div>
</body>
</html>
这里绿色可以占据整个屏幕
AI BotBETA在 CSS 中，百分比高度的计算需要父级有明确的高度定义。这里能生效的关键点在于：
<html>和<body>都设置了height:100%，使它们继承视口高度<div>作为body的子元素，默认会占据父级全部可用高度.box的height:100%就能正确计算虽然外层div没有显式设置高度，但作为body的子元素：
这个特性让.box最终计算出的高度等于视口高度。如果移除body或html的高度设置，布局就会失效。
在这段代码中，.box 元素设置了 height: 100%，展现出了没有受到父级 <div> 的高度限制，而是直接参考了 body 和 html 的高度。
这是因为在 CSS 中，当你设置 height: 100% 时，元素会寻找已设置明确高度的最近祖先元素作为参照。在你的代码中：
.box 设置了 height: 100%<div> 没有设置明确的高度body 和 html 设置了 height: 100%当一个元素的直接父级没有设置明确高度时，百分比高度会继续往上查找，直到找到设置了明确高度的祖先元素。在这个例子中，由于父 <div> 没有设置高度，.box 的 height: 100% 就会参考 body 和 html 的高度。
如果你想让 .box 的高度受到父 <div> 的限制，你需要给父 <div> 也设置一个明确的高度，例如：
<div style="height: 200px;">
<div class="box"></div>
</div>这样，.box 的高度就会是 200px，而不是整个视窗的高度。
这种行为是 CSS 中百分比高度计算的标准机制，它不是"跳过"，而是在没有找到明确设置高度的父元素时继续向上寻找参照物。
10 回答11k 阅读
5 回答4.7k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.5k 阅读✓ 已解决
3 回答5k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
4 回答2.4k 阅读✓ 已解决
绿色能够占据整个屏幕的原因是：