在设计布局时,我将html, body元素设置为height,100%但是在某些情况下,这失败了,那么应该使用什么?
html, body
height
100%
html, body { height: 100%; }
要么
html, body { min-height: 100%; }
嗯,这不是基于意见的,因为每种方法都有其自身的缺陷,那么推荐的方法是什么?为什么?
如果你想背景图片适用于html和body,填补了整个浏览器窗口,两者都不是。使用此代替:
html
body
html { height: 100%; } body { min-height: 100%; }
我的推理在这里给出(在此我全面解释如何以这种方式应用背景):
顺便说一句,你为什么要注明原因height,并min- height以html和body分别为,因为无论元素有什么内在的高度。两者都是height: auto默认设置。视口具有100%的高度,因此height: 100%是从视口中取出的,然后body最小化以允许滚动内容。
min- height
height: auto
height: 100%
height: 100%在两者上使用的第一种方法是,body一旦内容开始超出视口高度,就阻止其内容扩展。从技术上讲,这不会 _阻止_内容滚动,但会导致body折叠下面留出空隙,这通常是不希望的。
第二种方法,min-height: 100%在这两种方法上都使用,不会导致body扩展到的最高高度,html因为除非有一个explicitmin-height,body否则使用百分比不能工作。html``height
min-height: 100%
min-height
html``height
为了完整起见,CSS2.1的第10节包含所有详细信息,但这是一个_非常_复杂的阅读,因此,如果您对我在这里没有解释过的内容不感兴趣,可以跳过它。