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

Question

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

html, body {
   height: 100%;
}

或

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

好吧，这不是基于意见的，因为每种方法都有自己的缺陷，那么推荐的方法是什么？为什么？

Answer 1

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

body {
    min-height: 100vh;
}

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

Answer 2

如果您尝试将背景图像应用到填满整个浏览器窗口的html 和body，也不行。改用这个：

html {
   height: 100%;
}

body {
   min-height: 100%;
}

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

顺便说一句，您必须将height 和min-height 分别指定为html 和body 的原因是因为这两个元素都没有任何固有高度。默认情况下，两者都是height: auto。它是具有 100% 高度的视口，因此 height: 100% 取自视口，然后至少应用于 body 以允许滚动内容。

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

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

为了完整起见，section 10 of CSS2.1 包含所有详细信息，但这是一个非常令人费解的阅读，因此如果您对我在此处解释的内容不感兴趣，可以跳过它.