为何body设min-height:100vh后，main的height:100%无法撑满父元素？

用户原始代码：

body {
  border: 2px solid red;
  min-height: 100vh;
}

main {
   border: 2px solid green;
   height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> 
  <main>hihihihasidfiojdi</main>
</body>
</html>

原因解析 #

CSS中，子元素使用height: 100%时，必须依赖父元素拥有明确的、通过height属性定义的计算高度值，仅靠min-height无法满足要求：

• 给body设置min-height: 100vh，只是规定了body高度的下限是视口高度，但body的实际高度依然由内部内容决定——即便内容高度不足100vh，浏览器会自动把body拉到100vh，但这个高度是浏览器的隐式计算值，并非通过height属性显式声明，所以子元素无法继承这个“隐性高度”。
• 另外，html元素默认高度为auto，没有明确的高度设置，这也会阻断body的高度向子元素传递的逻辑。

解决方案 #

方式一：给html和body补全高度声明 #

通过显式设置html和body的高度，让main的百分比高度有明确的参照：

html {
  height: 100%;
}
body {
  border: 2px solid red;
  min-height: 100vh;
  height: 100%; 
}
main {
  border: 2px solid green;
  height: 100%;
}

注意：如果页面内容可能超过视口高度，建议把body的height:100%保留为min-height:100vh，避免内容被截断。

方式二：用Flexbox实现（更推荐） #

利用Flexbox的弹性布局特性，让main自动撑满body的可用空间，无需依赖百分比高度：

body {
  border: 2px solid red;
  min-height: 100vh;
  margin: 0; /* 清除body默认外边距，避免出现不必要的滚动条 */
  display: flex;
  flex-direction: column;
}
main {
  border: 2px solid green;
  flex: 1; /* 让main占据body的剩余空间 */
}

这种方案的优势是：当main内部内容超过视口高度时，body会自动拉伸，main也会跟随适配，不会出现内容截断或滚动异常的问题，适配性更强。

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