高度：100% VS 最小高度：100%答案

【问题标题】：height:100% VS min-height:100%高度：100% VS 最小高度：100%
【发布时间】：2010-02-26 13:19:51
【问题描述】：

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

谁能给我一个笼统的答案，height: 100%和min-height: 100%有什么区别？

【问题讨论】：

fyi min-height 并非所有浏览器都支持
仅当您将 IE

标签： css

【解决方案1】：

这是来自 W3C (link) 的解释：

以下算法描述了两个属性 [min-height 和 max-height] 如何影响“height”属性的使用值：

按照上面“计算高度和边距”下的规则计算暂定使用的高度（不包括“最小高度”和“最大高度”）。

如果此暂定高度大于“最大高度”，则再次应用上述规则，但这次使用“最大高度”的值作为“高度”的计算值。

如果结果高度小于“最小高度”，则再次应用上述规则，但这次使用“最小高度”的值作为“高度”的计算值。

总结一下： 基本上，如果 min-height 大于原本的高度（无论是否指定了明确的高度），那么 min-height 将用作高度.如果 min-height 小于 height 本来的值，则 min-height 无效。

对于您给出的具体情况，指定height:100% 会使元素的高度等于包含块的高度。（但是这可能会被否决，例如，如果您还指定了 max-height:50%。）指定 min-height:100% 意味着如果计算的高度小于 100%，实际上即使您明确指定高度小于 100%，它就像你说height:100%一样对待。请注意，一个关键区别是 max-height 可以超过 height 但不能超过 min-height（因为根据上面引用的 W3C 建议，max-height 在 height 之后但在 min-height 之前考虑）。

【讨论】：

【解决方案2】：

height: 100% 将达到容器高度的 100%； min-height: 100% 如果需要，也应该扩展到超过容器的高度。

请注意，IE 不支持 min-height。

【讨论】：

【解决方案3】：

我见过的 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; 那样将主 div 扩展到视口边界之外。最小高度：100%。

【讨论】：

对不起，先生，您能解释一下“main”类中“height:auto”的含义吗？我在几个 height100% 布局示例中看到了这个表达式。有些甚至编码为“height:auto!important”。但是，我不明白这条规则是如何起作用的

【解决方案4】：

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

min-height 将使元素最小为容器大小的 100%

但是你为什么要这样做呢？如果 min-height 为 100%，我认为它不会有任何影响...

在对 IE7 进行一些研究后，它可能会为您提供解决问题的方法：

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

【讨论】：