Css height： 100% 或 minheight： 100% 用于 html 和 body 元素

发布于07月10日

在设计布局时，我将html, body个元素的height设置为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 f或 and why?

推荐答案

如果您试图将背景图像应用于填满整个浏览器窗口的html和body，则两者都不适用.改用这个:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

我的理由是here分(其中我全面解释了如何以这种方式应用背景):

顺便说一下，您必须分别指定height和min-height到html和body的原因是因为这两个元素都没有任何固有高度.默认情况下，两者都是height: auto.它是具有height%高度的视口，因此从视口中提取height: 100%，然后作为最小值应用到body以允许滚动内容.

第一种方法是在两者上都使用height: 100%，防止body在其内容开始增长超过视口高度时扩展.从技术上讲，这不会阻止内容滚动，但会导致body在折叠下方留下间隙，这通常是不可取的.

第二种方法，在两者上都使用min-height: 100%，不会导致body扩展到html的全高，因为带有百分比的min-height在body上不起作用，除非html有明确的height.

为了完整起见，section 10 of CSS2.1包含了所有的细节，但这是一本extremely的曲折读物，所以如果您对我在这里解释的以外的内容不感兴趣，可以跳过它.