最小高度

课后整理 2020-12-20

在网页设计的过程中,往往会遇到需要设置最小高度的问题。例如,设计方案中某个 div是有背景图的,如果div高度太小,背景图就无法完整显示,这会影响视觉效果。为了设置这种类型的div的最小高度,即当该div内容小于最小高度时,该div显示的高度等于最小高度设定的值,当div内容超过最小高度时,该div高度会自动根据内容进行扩展。最小高度需要用到CSS的min-height属性。min-height属性的使用说明是设置或检索对象的最小高度,如果min-height的值大于max-height的值,高度会被自动设定为max-height的值。

本来单用min-height就可以了,但是1E6不支持min-height属性,因此需要加两行代 码height:auto !important;和height:100px;,对EE 6下的最小高度进行修正,其中!important的作用是对除了IE以外的浏览器来说的,任何后面标有!important的语句将获得绝对的优先权。改进后的代码在IE 6+/Firefox/Opera/Chrome/Safari下侧试有效。

【示例】