html和body元素的高度：100％或最小高度：100％？ [英] height: 100% or min-height: 100% for html and body elements?

问题描述

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

  html，body {
 height：100％; 
} 
  

或

  html，body {
 min-height：100％; 
} 
  

好吧，这不是基于意见的，因为每个方法都有自己的缺陷，

解决方案

如果您要将背景图片应用到 html 和 body 填充整个浏览器窗口。请改用：

  html {
 height ：100％; 
} 
 
 body {
 min-height：100％; 
} 
  

我的推理是这里（其中我以整体方式解释如何以此方式应用背景）：

顺便说一下，你必须指定 height 和分别是到 html 和 body 是因为两个元素都没有任何内在高度。默认情况下都是 height：auto 。它是具有100％高度的视口，因此 height：100％取自视口，然后应用于 body




第一种方法是使用 height：100％<> / code>两者，防止 body 扩展其内容，一旦他们开始增长超出视口高度。技术上，这不会防止内容滚动，但它会导致 body 在折叠之下留下一个空白，这通常是不受欢迎的。 / p>



第二种方法是在两个上使用 min-height：100％，不会导致 body 展开到 html 的完整高度，因为 min-height 除非 html 有一个显式的 height body >。

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

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 {
   height: 100%;
}

or

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?

解决方案

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

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.

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.

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.

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.

这篇关于html和body元素的高度：100％或最小高度：100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！