高度：100％或最小高度：100％的html和body元素？

在devise布局时，我将html, body元素的height为100%但在某些情况下，这会失败，那么应该使用什么？

 html, body { height: 100%; } 

要么

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

那么，这不是基于意见的，因为每种方法都有其缺陷，所以build议的方法是什么？为什么？

Answer 1

如果您想要将背景图像应用到填充整个浏览器窗口的html和body ， 用这个代替：

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

我在这里给出了我的推理（我在这里解释如何以这种方式应用背景）：

顺便说一句，你必须分别指定html和body height和min-height的原因是因为这两个元素都没有任何内在的高度。 两者都是height: auto默认为height: auto 。 视点的高度为100％，所以height: 100%从视口中取height: 100% ，然后作为最小值应用于body ，以允许滚动内容。

第一种方法，使用height: 100%两者都为height: 100% ，一旦它们开始超出视口高度，就可以防止body随其内容扩展。 从技术上讲，这并不妨碍内容滚动，但它确实会导致body在折叠下面留下空隙，这通常是不可取的。

第二种方法，使用min-height: 100%都不会导致body扩展到html的整个高度，因为除非html具有明确的height否则带有百分比的min-height对body不起作用。

为了完整起见， CSS2.1的第10节包含了所有的细节，但是这是一个非常复杂的阅读，所以如果你对这里所说的内容没有兴趣，你可以跳过它。