高度：100％VS最小高度：100％ [英] height:100% VS min-height:100%

问题描述

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

I use this css to set a <div> to maximum height

任何人都可以给我一个一般的答案， height：100％和 min-height：100％

Can anyone give me a general answer, what's the difference between height: 100% and min-height: 100% ?

推荐答案

这是W3C的解释（ link ）：

Here's an explanation from the W3C (link):

属性[min-height和max-height]影响'height'属性的使用值：

The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:

计算暂定使用的高度'max-height'）遵循上面计算高度和边距下的规则。

The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.

如果此暂定高度大于'max-height'但是这次使用'max-height'的值作为'height'的计算值。

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'.

如果生成的高度小于'min-height '，则再次应用上述规则，但此时使用'min-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用作高度。如果最小高度小于高度，则最小高度没有效果。

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.

对于特定情况， / strong>指定 height：100％使元素的高度等于包含块的高度。 （但是，这可能会被推翻，例如如果您还指定 max-height：50％。）指定 min-height：100％ code>意味着如果计算的高度小于100％，事实上即使你明确指定了高度小于100％，它被视为你说 height：100％。请注意，一个主要区别是，max-height可以覆盖高度，但不能覆盖最小高度（因为根据上面引用的W3C建议，max-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).

这篇关于高度：100％VS最小高度：100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！