所以我最近遇到了这样的场景，我想要为背景创建一个渐变，开始时是一种 colored颜色 ，然后将另一种 colored颜色 扩展到页面底部.我最初编写了一些如下所示的CSS:
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom,
red 50%,
blue 50%
);
}
这在一开始是有效的，直到我有内容溢出页面，然后梯度重复本身.我最终找到了一个解决方案，将根元素上的height更改为min-height，我解释了为什么高度不起作用，百分比是基于包含块的，对于根元素，它是"初始包含块"，在这种情况下是视口.
然而，我还没有找到关于根元素上的why min-height: 100%导致溢出的答案，这就是我希望得到的答案.
using 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>using 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>