<html>元素高度是否应始终大于或等于<body>元素高度？

示例场景1 #

以下代码会出现<html>高度小于<body>的情况：

CSS代码 #

html {
  height: 100%;
  background-color: yellow;
  border: 5px solid black;
}

body {
  min-height: 100%;
  background-color: green;
}

div {
  height: 120dvh;
}

HTML代码 #

<div>
  Some content.
</div>

对应的效果截图：

示例场景2 #

某实际网站中也存在<body>高度大于<html>的情况：

核心问题解答 #

1. 这种场景有适用价值吗？ #

刻意设置的话仅在极少数需求下有用——比如需要给<html>固定视口高度的背景或边框，同时允许<body>内容超出视口滚动。但绝大多数时候，这属于样式设置不当引发的意外情况，并非合理设计。

2. 是否必须保证<html>高度≥<body>？ #

没有强制规范，但从浏览器默认行为和前端最佳实践来看，这是更合理的状态。浏览器默认会让<html>和<body>的高度由内容自动撑开，不会出现前者小于后者的情况；只有手动给<html>设置固定高度（如height: 100%），且<body>内容超出该高度时，才会出现此异常。

3. 这种情况是否无关紧要？ #

绝对不是。像你遇到的菜单渲染问题就是典型负面影响：当<html>作为滚动容器但高度小于<body>时，滚动后容器的可视区域计算会失真，导致组件错误判断溢出状态，进而出现菜单翻转逻辑异常。此外还可能引发背景色覆盖不全、滚动事件触发异常等问题。

针对菜单问题的修复建议 #

• 调整根元素样式：移除<html>的固定高度设置，让其高度自适应内容，确保滚动容器的高度能正确匹配实际内容范围；
• 修正滚动容器参考：计算菜单溢出时，改用页面可视视口（window.innerHeight）或菜单所在的父级滚动容器作为判断依据，而非高度不足的<html>元素。

内容的提问来源于stack exchange，提问作者cyclingLinguist