为何class为box的div及body无法达到100%高度？已设min-height

问题1：为何带有class为box的div元素无法实现100%高度？ #

咱们先拆解你这段代码的核心问题：你给 html 和全局元素(*)设置了 height: 100%，但给 body 用的是 min-height: 100%。这里要记住一个关键规则：子元素的百分比高度（包括min-height:100%）需要父元素有明确的height值，而不是min-height。

当你给body设置min-height:100%时，它的高度逻辑是「内容不够就占满视口，内容多了就跟着延伸」，但并没有一个固定的height数值。这时候.box的min-height:100%找不到可参照的父元素固定高度，自然无法撑满整个视口。

修正方案： #

给body也设置height:100%，同时去掉全局*的height:100%（全局设置这个会影响很多无关元素，完全没必要）：

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  padding: 0;
  margin: 0;
  height: 100%; /* 给html和body都设置明确的高度基准 */
}
.box {
  min-height: 100%;
  background-color: brown;
}
</style>
</head>
<body>
<div class="box">
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</div>
</body>
</html>

问题2：更新代码后，为何body元素无法达到100%高度？ #

你更新后的代码给html和body都设了min-height:100%，但依然踩了百分比高度的规则：html元素的min-height:100%无法让它自动撑满视口。因为html的父容器是浏览器视口，当你只给html设min-height:100%时，它的高度还是由子元素（也就是body）的内容决定，并没有被强制拉伸到视口高度。这时候body的min-height:100%就没有有效的参照高度，自然无法占满视口。

修正方案： #

给html设置height:100%，让它先撑满视口，然后body用min-height:100%就可以继承这个高度，同时也能在内容超过视口时自动延伸：

<!DOCTYPE html>
<html>
<head>
<style>
html {
  padding: 0;
  margin: 0;
  height: 100%; /* 让html先撑满视口，作为body的高度基准 */
}
body {
  padding: 0;
  margin: 0;
  min-height: 100%; /* 继承html的高度，内容多的时候自动延伸 */
}
</style>
</head>
<body>
<div class="box">
  <p>This is a paragraph.</p>
</div>
</body>
</html>

额外小技巧： #

如果想让元素快速占满视口，现在更推荐用vh单位（视口高度），比如min-height:100vh，这样不需要依赖父元素的高度设置，直接以视口为参照，逻辑更简单直观：

.box {
  min-height: 100vh;
  background-color: brown;
}

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