在设计布局时,我将html, body
元素设置height
为,100%
但在某些情况下,这会失败,那么应该使用什么?
html, body {
height: 100%;
}
或者
html, body {
min-height: 100%;
}
好吧,这不是基于意见的,因为每种方法都有自己的缺陷,那么推荐的方法是什么,为什么?
如果您尝试将背景图像应用到html
并body
填满整个浏览器窗口,则两者都不会。改用这个:
html {
height: 100%;
}
body {
min-height: 100%;
}
这里给出了我的推理(我在这里全面解释了如何以这种方式应用背景):
顺便说一句,您必须分别指定
height
andmin-height
tohtml
和的原因body
是因为这两个元素都没有任何内在高度。两者都是height: auto
默认的。它是具有 100% 高度height: 100%
的视口,因此取自视口,然后应用到body
最低限度以允许滚动内容。
第一种方式,height: 100%
在两者上使用,一旦它们开始超出视口高度,就可以防止body
其内容扩展。从技术上讲,这不会阻止内容滚动,但确实会导致body
在折叠下方留下一个间隙,这通常是不可取的。
第二种方式,min-height: 100%
在两者上使用,不会导致body
扩展到完整高度,html
因为min-height
使用百分比不起作用,body
除非html
有明确的height
.
为了完整起见,CSS2.1 的第 10 节包含了所有细节,但这是一个非常复杂的阅读,因此如果您对我在这里解释的内容不感兴趣,可以跳过它。
您可以使用视口高度 ( vh
) 单位:
body {
min-height: 100vh;
}
它是相对于屏幕的,而不是相对于父高度的,所以你不需要 html height: 100%。