为何body元素height设为0时，background-color仍会铺满整个屏幕？

问题核心原因 #

这是CSS标准里针对根元素、body元素的特殊背景传播规则导致的，和body本身的实际尺寸无关：

• 当HTML根元素没有单独设置背景时，浏览器会自动把body元素的背景传播到整个浏览器视口，哪怕body本身的高度为0，这个传播行为也会生效。
• 你设置的height: 0本身是生效的，只是body的背景被单独提取出来铺满了整个屏幕而已，你可以给body添加overflow: hidden后塞入一个高于0的子元素测试，就能发现子元素会被截断，验证body本身高度确实为0。

验证方案 #

你可以给HTML根元素单独设置背景，阻断body背景的传播逻辑，就能直观看到body的真实尺寸：

/* 给根元素设置背景，阻止body背景传播到视口 */
html {
  background-color: blue;
}
.bgcolor { 
  background-color: red;
  height: 0;
  /* 加边框更清晰观测body的实际大小 */
  border: 2px solid yellow;
}

修改后你会发现整个屏幕的背景变成了根元素的蓝色，而body只有2px高的黄色边框，内部红色区域高度确实为0。

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