html - 高度 : 100% or min-height: 100% for html and body elements?

Question

在设计布局时，我将 html, body 元素的 height 设置为 100% 但在某些情况下，这会失败，所以应该怎么办被使用？

html, body {
   height: 100%;
}

或

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

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

Answer 1

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

html {
   height: 100%;
}

body {
   min-height: 100%;
}

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

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.

第一种方法，在两者上都使用 height: 100%，防止 body 在开始超出视口(viewport)高度时随其内容一起扩展。从技术上讲，这不会阻止内容滚动，但它确实会导致 body 在折叠下方留下一个间隙，这通常是不可取的。

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

为了完整起见，section 10 of CSS2.1包含所有详细信息，但这是一本非常令人费解的读物，因此如果您对我在这里解释的内容以外的任何内容不感兴趣，可以跳过它。