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

我用这个CSS设置<div>到最大高度高度：100％VS最小高度：100％

谁能给我一个普遍的答案，什么是height: 100%和min-height: 100%之间的区别？

来源

2010-02-26 Dan

所有浏览器都不支持fyi min-height – marcgg 2010-02-26 13:22:31

仅当您将IE <= 6标记为浏览器时才适用。除此之外的任何东西都支持它。 – BalusC 2010-02-26 17:23:42

下面是来自W3C的说明（link）：

下面的算法描述了两个属性[最小高度和最大高度]如何影响“高度”属性的使用的值：

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

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

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

总结：基本上，如果最小高度大于其它高度（无论是否指定了明确的高度），则最小高度用作高度。如果最小高度小于其他高度，那么最小高度不起作用。

对于您给出的具体情况，指定height:100%使元素的高度等于包含块的高度。（但是，如果您还指定了max-height:50%，则可能会被忽略）。指定min-height:100%意味着如果计算出的高度小于100％，实际上即使您明确指定的高度小于100％，也会将其视为你说height:100%。请注意，一个关键的区别是，最大高度可以推翻高度，但不能推翻最小高度（因为根据上面引用的W3C建议，在高度之后但在最小高度之前考虑最大高度）。

来源

2010-02-26 13:34:31

高度会将您的元素放置到其容器的100％的大小。

最小高度将把元素到最小容器大小

的100％，但你为什么要这么做呢？如果最小高度为100％它不会有IE7中的一些研究之后，我认为任何效果......

它可能给你一个解决问题的办法：

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

来源

2010-02-26 13:22:06 Kennethvr

height: 100%会到100％的集装箱高度;如果需要的话，min-height: 100%应该扩展超过容器的高度。

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

来源

2010-02-26 13:23:32 Nalum

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

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

来源

2010-02-26 15:25:37

不好意思，先生，您能否在“主”类中解释“身高：自动”的含义？我已经在高度100％布局的几个例子中看到了这个表达式。有些甚至编码“height：auto！important”。但是，我不明白这条规则是如何起作用的 – Dan 2010-11-20 17:17:35

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

回答

相关问题