HTML根元素背景色解析：高度为0为何能铺满整个页面？

这是浏览器的背景色传播机制在起作用：

• 当 <html> 元素未显式设置背景样式时，浏览器会把 <body> 的背景色“提升”到 <html> 元素上，让它渲染成整个视口的大小——哪怕此时 <html> 和 <body> 因为没有内容，自身高度计算为0。
• 这种行为是从早期浏览器兼容逻辑延续下来的，现在已经被纳入CSS标准，目的是简化页面背景的设置，不用特意给根元素设置全屏背景。

可以通过以下几种方式阻止这种现象：

• 给 <html> 显式设置背景：比如写 html { background-color: #ffffff; }，这样 <body> 的背景色就不会被传播，当 <body> 高度为0时，背景色就不会显示。
• 禁用背景传播：给 <html> 添加 background-attachment: fixed; 样式，能阻止浏览器的背景提升行为，不过更推荐直接给 <html> 设置背景的方式，逻辑更清晰。
• 给 <body> 设置明确高度（按需）：如果需要 <body> 本身有高度而非依赖传播，可以写 body { min-height: 100vh; }，让 <body> 高度至少铺满视口，但这不是阻止传播，而是让 <body> 自身有高度。

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