Question

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

html, body {
   height: 100%;
}

或

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

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

Answer 1

如果您尝试将背景图片应用于填充整个浏览器窗口的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包含所有细节，但这是一个极其错综复杂的阅读，所以如果你对我以外的任何事情都不感兴趣，你可以跳过它。在这里解释。

Answer 2

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

body {
    min-height: 100vh;
}

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

高度：100％或最小高度：100％的HTML和身体元素？

2 个答案: