高度:100%或最小高度:100%的HTML和身体元素？

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%;
}

我在这里给出了推理(我在这里整体解释了如何以这种方式应用背景):

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

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

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

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

Answer 2

您可以使用viewport height(vh)单位:

body {
    min-height: 100vh;
}

它与屏幕有关,而不是父高,所以你不需要html高度:100%.