height:100%还是min-height:100%用于html和body元素？

Question

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

html, body {
   height: 100%;
}

或

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

好吧，这并不是基于观点的，因为每种方法都有自己的缺陷，所以推荐的方法是什么，为什么呢？

Answer 1

您可以使用视口高度(VH)单位:

body {
    min-height: 100vh;
}

它是相对于屏幕，而不是父级高度，所以你不需要html高度:100%。

Answer 2

如果您试图将背景图像应用到填充整个浏览器窗口的html和body，则两者都不会。请改用此选项:

css prettyprint-override">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的全部高度，因为除非HTML具有显式的height，否则带有百分比的min-height对body不起作用。

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