高度：100％或最小高度：100％用于html和body元素？

在设计布局时，我将html, body元素设置为height，100%但是在某些情况下，这失败了，那么应该使用什么？

html, body {
   height: 100%;
}

要么

html, body {
   min-height: 100%;
}

嗯，这不是基于观点的，因为每种方法都有其自身的缺陷，那么推荐的方法是什么？为什么？

如果你想背景图片适用于html和body，填补了整个浏览器窗口，两者都不是。使用此代替：

html {
   height: 100%;
}

body {
   min-height: 100%;
}

我的推理在这里给出（在此我全面解释如何以这种方式应用背景）：

顺便说一句，你为什么要注明原因height，并min-height以html和body分别为，因为无论元素有什么内在的高度。两者都是height: auto默认设置。视口具有100％的高度，因此height: 100%是从视口中提取的，然后body最小化以允许滚动内容。

height: 100%在两者上使用的第一种方法是，body一旦内容开始超出视口高度，就可以防止其内容扩展。从技术上讲，这不会阻止内容滚动，但会导致body折叠下面留出空隙，这通常是不希望的。

第二种方法，min-height: 100%在这两种方法上都使用，不会导致body扩展到的最高高度，html因为min-height带有百分比的方法不起作用，body除非html有一个explicit height。

为了完整起见，CSS2.1的第10节包含了所有详细信息，但这是一个非常复杂的阅读，因此，如果您对我在这里没有解释的内容不感兴趣，可以跳过它。

您可以使用视口高度（vh）单位：

body {
    min-height: 100vh;
}

它是相对于屏幕的，而不是相对于父级的高度，因此您不需要html高度：100％。