高度:100%或最低高度:100%的html和身体元素?

While designing layouts I set the html, body elements' height to 100% but in some cases, this fails, so what should be used?

在设计布局时，我将html、body元素的高度设置为100%，但在某些情况下，这是失败的，所以应该使用什么呢?

html, body {
   height: 100%;
}

或

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

Well, this is not opinion based as each method has its own flaws, so what's the recommended way to go for and why?

这并不是基于观点，因为每个方法都有自己的缺陷，那么推荐的方法是什么，为什么呢?

1 个解决方案

#1

151

If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

如果你想将背景图像应用到html和正文中，而这些内容又会填满整个浏览器窗口。取代它可使用:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):

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

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

顺便说一下，您必须分别为html和body指定高度和最小高度的原因是，这两个元素都没有任何内在的高度。两者都是高度:自动默认。它是具有100%高度的视口，因此高度:100%是从视口取出，然后应用到body上，以允许滚动内容。

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

第一种方法，使用高度:在两种情况下都是100%的，一旦它们开始在viewport高度之外增长，就可以防止body扩展。从技术上讲，这并不能阻止内容滚动，但它确实会导致正文在褶皱下面留下一个空隙，这通常是不可取的。

The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.

第二种方法，使用最小高度:两者都是100%，不会导致body扩展到html的全部高度，因为如果html没有显式的高度，那么最小的身高百分比对body就不起作用。

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.

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

#1

151