89

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

html, body {
   height: 100%;
}

或者

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

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

4

2 回答 2

202

如果您尝试将背景图像应用到html并body填满整个浏览器窗口，则两者都不会。改用这个：

html {
   height: 100%;
}

body {
   min-height: 100%;
}

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

顺便说一句，您必须分别指定heightand min-heighttohtml和的原因body是因为这两个元素都没有任何内在高度。两者都是height: auto默认的。它是具有 100% 高度height: 100%的视口，因此取自视口，然后应用到body最低限度以允许滚动内容。

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

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

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

于 2013-07-09T18:41:00.933 回答
20

您可以使用视口高度 ( vh) 单位：

body {
    min-height: 100vh;
}

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

于 2018-09-25T09:49:21.970 回答