静态定位正常布局下，body元素默认高度是否未占满容器100%？

嘿，这个误区我刚学CSS布局的时候也踩过！之前也想当然觉得<body>默认就会占满<html>甚至整个视口的高度，但实际测试后才发现完全不是这么回事——其实<body>就是个普通的块级元素，遵循正常流的高度规则，没有什么特殊待遇。

核心原因：块级元素的默认高度规则 #

所有块级元素（包括<body>）的默认高度都是height: auto，意思是高度完全由内部内容撑开。如果<body>里没有任何内容，它的高度就是0；只有当内容高度超过视口时，<body>才会被拉伸到对应高度。

那为什么会有“<body>默认占满容器”的错觉呢？大概率是因为你见过的很多前端项目，一开始就重置了全局样式，比如给<html>和<body>设置了height: 100%，时间久了就误以为这是浏览器的默认行为。

关于<html>和<body>的高度关系 #

这里要额外澄清：<html>元素的高度默认也是由内容（也就是<body>的margin box）决定的，它本身也不会自动占满视口高度。只有当你给<html>设置了明确的高度（比如height: 100%或者min-height: 100vh），<body>的百分比高度设置才会生效。

如何让<body>占满视口高度？ #

如果需要<body>默认占满整个视口高度，可以用这两种常用方法：

方法1：使用百分比高度

html {
  height: 100%; /* 先让根元素占满视口高度 */
  margin: 0; /* 去掉默认边距，避免留白 */
}
body {
  height: 100%; /* 继承父元素的高度，从而占满视口 */
  margin: 0;
}

方法2：使用vh单位（更简洁）

body {
  min-height: 100vh; /* 确保body至少占满视口高度，内容过多时会自动延伸 */
  margin: 0;
}

这种方法不需要给<html>设置高度，100vh直接代表视口高度的100%，用min-height而不是height的好处是，当内容超过视口时，<body>会自动被撑开，不会出现内容被截断的问题。

内容的提问来源于stack exchange，提问作者Water Cooler v2