极客观点
项目管理
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的高度设置，布局就会失效。
绿色能够占据整个屏幕的原因是：
10 回答11.6k 阅读
2 回答3.1k 阅读✓ 已解决
2 回答4.1k 阅读✓ 已解决
3 回答2.7k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
2 回答1.7k 阅读✓ 已解决
4 回答2.5k 阅读✓ 已解决
在这段代码中，
.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>也设置一个明确的高度，例如：这样，
.box的高度就会是 200px，而不是整个视窗的高度。这种行为是 CSS 中百分比高度计算的标准机制，它不是"跳过"，而是在没有找到明确设置高度的父元素时继续向上寻找参照物。