Question

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

任何人都可以给我一个通用答案，height: 100%和min-height: 100%之间的区别是什么？

Answer 1

以下是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％ 100％，它被视为你说height:100%。请注意，一个关键区别是 max-height可以否决高度但不能超过最小高度（因为根据上面引用的W3C建议，在高度之后但在最小高度之前考虑最大高度）。

Answer 2

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

请记住，IE中不支持最小高度。

Answer 3

我见过的最小高度的唯一实际用途是将页脚粘贴到页面底部。请考虑以下代码：

<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上使用高度：100％并用内容填充它，红色页脚将悬停在视口的底部。指定为100％的高度不会扩展视口范围之外的主div，就像声明height：auto;最小高度：100％。

Answer 4

高度会使元素的大小达到容器的100％。

min-height会将元素置于容器大小的最小值

但你为什么要这样做呢？如果最小高度为100％，我认为不会有任何影响...

在IE7中进行一些研究后，它可能会为您解决问题：

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

高度：100％VS最小高度：100％

4 个答案: