CSS 高度：100% VS 最小高度：100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2341821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
height:100% VS min-height:100%
提问by Dan
I use this cssto set a <div>to maximum height
我使用这个css来设置<div>最大高度
Can anyone give me a general answer, what's the difference between height: 100%and min-height: 100%?
谁能给我一个笼统的答案，height: 100%和 之间有什么区别min-height: 100%？
采纳答案by Tim Goodman
Here's an explanation from the W3C (link):
以下是 W3C 的解释（链接）：
The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:
以下算法描述了两个属性 [min-height 和 max-height] 如何影响 'height' 属性的使用值：
The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
暂时使用的高度是按照上面“计算高度和边距”下的规则计算的（没有“最小高度”和“最大高度”）。
If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
如果此暂定高度大于“max-height”，则再次应用上述规则，但这次使用“max-height”的值作为“height”的计算值。
If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.
如果结果高度小于“min-height”，则再次应用上述规则，但这次使用“min-height”的值作为“height”的计算值。
To summarize:Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.
总结一下：基本上，如果 min-height 大于原本的高度（无论是否指定了明确的高度），则将 min-height 用作高度。如果 min-height 小于原本的高度，则 min-height 不起作用。
For the specific case you give,specifying height:100%makes the height of the element equal to the height of the containing block. (However this could potentially be overruled, for instance if you also specified max-height:50%.) Specifying min-height:100%means that if the computed height is less than 100%, in fact even if you explicitly specified a height less than 100%, it is treated as if you said height:100%. Note that one key difference is that max-height can overrule height but cannot overrule min-height(because max-height is considered after height but before min-height according to the W3C recommendation as quoted above).
对于您给出的特定情况，指定height:100%使元素的高度等于包含块的高度。（然而，这可能被推翻，例如，如果您还指定max-height:50%）指定min-height:100%的手段，如果计算高度小于100％时，即使你明确指定的高度小于100％的事实，这是因为如果你说的治疗height:100%. 请注意，一个关键区别是max-height 可以覆盖高度但不能覆盖 min-height（因为根据上面引用的 W3C 建议，max-height 被认为是在 height 之后但在 min-height 之前）。
回答by Nalum
height: 100%will go to 100% of the container height; min-height: 100%should expand past the container's height if it needs too.
height: 100%将达到容器高度的 100%；min-height: 100%如果需要，也应该扩展到容器的高度。
Keep in mind that min-height is not supported in IE.
请记住，IE 不支持 min-height。
回答by Nalum
The only practical use I've seen of min-height is sticking a footer to the bottom of the page. Consider the following code:
我见过的 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>
The red is stuck to the bottom of the view port when the main div is empty, and as you fill the main div with content, the red footer still sticks to the bottom of the page.
当主 div 为空时，红色会粘在视口的底部，当你用内容填充主 div 时，红色的页脚仍然粘在页面的底部。
To illustrate the point, if you just use height: 100% on the main div and fill it up with content, the red footer will hover at the bottom of the viewport. The height specified as 100% doesn't expand the main div outside the bounds of the viewport like it will if you declare height: auto; min-height: 100%.
为了说明这一点，如果您只在主 div 上使用 height: 100% 并用内容填充它，红色页脚将悬停在视口的底部。指定为 100% 的高度不会像声明 height: auto; 那样将主 div 扩展到视口边界之外。最小高度：100%。
回答by Kennethvr
height will put your element to a size of 100% of it's container.
height 会将您的元素的大小设为其容器的 100%。
min-height will put the element to min 100% of the container size
min-height 会将元素放在容器大小的最小 100%
but why would you want to do that anyway? if min-height is 100% it will not have any effect in my opinion...
但你为什么要这样做呢？如果 min-height 是 100%，在我看来它不会有任何影响......
after some research in IE7 it might give you a solution to a problem:
在 IE7 中进行一些研究后，它可能会给你一个问题的解决方案：
http://www.search-this.com/2007/02/05/css-min-height-explained/
http://www.search-this.com/2007/02/05/css-min-height-explained/
