为何根元素设置min-height能适配溢出内容，height却不行？

核心逻辑拆解 #

给html设height:100%时，它的高度被固定死为视口高度（根元素的包含块是初始包含块，也就是浏览器视口）。当页面内容高度超过视口，body会被内容撑开，但html的高度不会跟着变——始终停在视口高度。而body的背景渐变默认是重复填充（background-repeat: repeat），所以当body高度超过html时，渐变就会在超出区域重复显示。

换成min-height:100%后，html的高度规则变成至少等于视口高度，当页面内容溢出时，html会被内部内容自动撑开，高度随内容增长。此时body的高度会跟随html的高度扩展，背景渐变会覆盖整个html（也就是整个页面）的高度，自然不会出现重复。

使用height的示例（问题复现） #

html {
  height: 100%;
}

body {
  background-image: linear-gradient(to bottom, 
            red 50%, 
            blue 50%
        );
}

#exact-viewport-height {
  height: 101vh;
  opacity: 0.5;
  background-color: black;
}

<div id="exact-viewport-height">
</div>

内容高度超过视口后，html高度固定，导致body背景渐变重复。

使用min-height的示例（解决问题） #

html {
  min-height: 100%;
}

body {
  background-image: linear-gradient(to bottom, 
            red 50%, 
            blue 50%
        );
}

#exact-viewport-height {
  height: 101vh;
  opacity: 0.5;
  background-color: black;
}

<div id="exact-viewport-height">
</div>

html高度随内容扩展，body背景渐变覆盖整个页面高度，无重复。

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