CSS 为什么在 min-height: 100% 时，HTML 和 BODY 不会占满整个页面高度

在本文中，我们将介绍为什么在设置了 min-height: 100% 后，HTML 和 BODY 元素并不会占满整个文档的高度。我们将探讨这个问题的原因，并提供一些解决方法。

阅读更多：CSS 教程

问题背景

在编写CSS样式表时，经常会遇到需要将HTML和BODY元素铺满整个页面的需求。通常情况下，我们可以通过设置CSS样式 html, body { height: 100%;} 来实现这一效果。但有时候，当我们将 min-height: 100% 应用到HTML和BODY元素时，会发现它们并没有完全铺满整个页面高度。

问题原因

这个问题的原因在于CSS规范中对百分比高度的计算方式。根据规范，当我们为一个元素设置 height: 100% 时，它会继承父元素的高度作为自己的高度值。然而，在设置了 min-height: 100% 后，HTML 和 BODY 元素并没有继承文档视口的高度作为自身的高度值。

细心观察可以发现，HTML和BODY元素的高度值是由它们的内容决定的，而不是由文档视口的高度决定的。如果文档内容的高度比视口高度小，那么HTML和BODY元素的高度也将保持与内容相同。这就导致了我们设置 min-height: 100% 时，元素并不会铺满整个页面。

解决方法

针对这个问题，我们可以采取一些解决方法来确保HTML和BODY元素能够铺满整个页面高度。以下是几种常见的解决方法：

1. 设置全局样式

我们可以为HTML和BODY元素添加全局样式，强制它们铺满整个页面高度。通过设置 html, body { height: 100%; }，我们可以将元素的高度值设为视口的高度。

html, body {
  height: 100%;
}

2. 设置绝对定位

另一种解决方法是使用绝对定位。通过为HTML和BODY元素设置 position: absolute;，并将其左上角定位为视口的左上角，我们可以确保元素铺满整个页面高度。

html, body {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

3. 使用flex布局

使用flex布局也是一个常见的解决方法。通过为HTML和BODY元素添加 display: flex; 属性，我们可以将它们作为flex容器，然后设置 flex-grow: 1;，使其自动填充剩余空间。这样就能保证它们铺满整个页面高度。

html, body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

4. 使用vh单位

最后一种方法是使用视口高度单位（vh）。将HTML和BODY元素的高度值设置为100vh，即可确保它们铺满整个页面高度。

html, body {
  height: 100vh;
}

总结

在本文中，我们介绍了为什么在使用 min-height: 100% 时，HTML 和 BODY 元素并不会占满整个页面高度的原因。我们发现这个问题是由于百分比高度的计算方式导致的。为了解决这个问题，我们可以通过设置全局样式、绝对定位、使用flex布局或者使用视口高度单位来确保HTML和BODY元素能够铺满整个页面高度。选择合适的方法取决于具体的需求和设计。

希望本文能帮助您解决在设置 min-height: 100% 时HTML和BODY元素高度值无法占满整个页面的问题，并提供了多种解决方法供您选择。