一尘不染

高度:100%或最小高度:100%用于html和body元素?

html

在设计布局时,我将html, body元素设置为height100%但是在某些情况下,这失败了,那么应该使用什么?

html, body {
   height: 100%;
}

要么

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

嗯,这不是基于意见的,因为每种方法都有其自身的缺陷,那么推荐的方法是什么?为什么?


阅读 366

收藏
2020-05-10

共1个答案

一尘不染

如果你想背景图片适用于htmlbody,填补了整个浏览器窗口,两者都不是。使用此代替:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

我的推理在这里给出(在此我全面解释如何以这种方式应用背景):

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

height: 100%在两者上使用的第一种方法是,body一旦内容开始超出视口高度,就阻止其内容扩展。从技术上讲,这不会 _阻止_内容滚动,但会导致body折叠下面留出空隙,这通常是不希望的。

第二种方法,min-height: 100%在这两种方法上都使用,不会导致body扩展到的最高高度,html因为除非有一个explicitmin-heightbody否则使用百分比不能工作。html``height

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

2020-05-10