Tim*_*man 26
以下是W3C(链接)的解释:
以下算法描述了两个属性[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%,它也会被视为你说的height:100%.请注意,一个关键区别是最大高度可以否决高度但不能超过最小高度(因为根据上面引用的W3C建议,在高度之后但在最小高度之前考虑最大高度).
小智 7
我见过的最小高度的唯一实际用途是将页脚粘贴到页面底部.请考虑以下代码:
<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%.