logo标签列表

height:100% VS min-height:100%

css
45

我使用这个css来将一个<div>设置为最大高度。

有没有人能给我一个通用答案，height: 100%和min-height: 100%有什么区别？

1
FYI，不是所有浏览器都支持min-height属性。 - marcgg
10
只有标记IE <= 6为浏览器才可以。任何超出这个版本的浏览器都支持它。 - BalusC
4个回答
46

以下是来自 W3C（link）的解释：

下面的算法描述了两个属性[min-height和max-height]如何影响“height”属性的使用值：
在没有“min-height”和“max-height”的情况下计算临时使用的高度，遵循上面“计算高度和边距”的规则。
如果此临时高度大于“max-height”，则再次应用上述规则，但这次将“max-height”的值作为“height”的计算值。
如果结果高度小于“min-height”，则再次应用上述规则，但这次使用“min-height”的值作为“height”的计算值。

总之：基本上，如果最小高度比高度（无论是否指定了显式高度）大，则使用最小高度作为高度。 如果最小高度小于否则可能的高度，则最小高度没有任何效果。

对于您提供的具体情况，指定height:100%使元素的高度等于包含块的高度。(但是如果您还指定了max-height:50%，这可能会被覆盖。)指定min-height:100%意味着如果计算出的高度小于100%，即使您明确指定了小于100%的高度，它也会被视为height:100%。请注意，一个关键的区别是max-height可以覆盖height，但不能覆盖min-height（因为根据上述W3C建议，max-height在height之后但在min-height之前考虑）。

17

height: 100% 表示元素的高度将会与其容器的高度一致；min-height: 100% 则表示元素的最小高度为容器高度，如果需要，可以超出容器高度。

请注意，IE浏览器不支持min-height属性。

8
我所见过的min-height唯一实用的用途就是将页脚固定在页面底部。请考虑以下代码：
<html>
  <head></head>
  <body style="height: 100%">
    <div style="height: 100%">
      <div style="height: auto; min-height: 100%; background-color: blue;">
        <div class="main" style="padding-bottom: 300px;">
        </div>
      </div>
      <div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div>
    </div>
  </body>
</html>

当主div为空时，红色部分会固定在视口底部，当你向主div中填充内容时，红色页脚仍将保持在页面底部。
为了说明这一点，如果你只是在主div上使用height：100％并填充它的内容，则红色页脚将悬停在视口底部。指定为100％的高度不会像声明height：auto; min-height: 100%那样使主div超出视口范围。
1
先生，您能解释一下“main”类中“height:auto”的含义吗？我在几个高度为100%的布局示例中看到了这个表达式。有些人甚至编写了“height:auto!important”。然而，我不明白这条规则是如何起作用的。 - Dan
2

height会将您的元素设置为其容器大小的100％。

min-height会将元素设置为容器大小的最小值100％

但是，您为什么要这样做呢？如果min-height为100％，在我看来它将没有任何效果...

经过在IE7中的一些研究，它可能会为您提供解决问题的解决方案：

http://www.search-this.com/2007/02/05/css-min-height-explained/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接