高度：100％或最小高度：100％的HTML和身体元素？

Question

高度：100％或最小高度：100％的HTML和身体元素？

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

html, body {
   height: 100%;}

要么

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

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

Answer 1

如果您尝试将背景图像应用于html并body填满整个浏览器窗口，则不会。请改用：html {    height: 100%;}body {    min-height: 100%;}我在这里给出了推理（我在这里整体解释了如何以这种方式应用背景）：顺便说一句，你为什么要注明原因height，并min-height以html和body分别为，因为无论元素有什么内在的高度。两者都是height: auto默认的。视口具有100％的高度，因此height: 100%从视口中获取，然后应用于body最小值以允许滚动内容。第一种方法，height: 100%在两者上使用，body一旦它们开始超出视口高度，就可以防止其内容扩展。从技术上讲，这不会阻止内容滚动，但它确实会导致body在折叠下方留下间隙，这通常是不合需要的。第二种方法，min-height: 100%在两者上使用，不会导致body扩展到完整高度，html因为除非有明确min-height的百分比，body否则百分比不起作用。htmlheight为了完整起见，CSS2.1的第10部分包含了所有细节，但这是一个非常复杂的阅读，所以如果你对我在这里解释的内容不感兴趣，你可以跳过它。