css div设定最小高度又自适应高度

作者:袖梨 2022-06-25

经常使用div布局的盆朋友应该有过这样的经验,并且这样的情况并不少见:有一个 div,当它里面的内容超过它的高度时,让这个 div 的高度随内容自动变化(自适应),但是如果内容很少时,又想让这个 div 的高度保持一个固定的最小值,这样问题就来了,我们都知道,div 在 IE7、IE8、Firefox、Opera 和 chrome 中不设置高度(或者 height:auto )的情况下,其高度是自适应的,但如果设了高度,超出部分会自动隐藏,既(overflow:hidden),但是 IE6 这小子可不吃这一套,即使设置了高度,内容超过它的高度时也会自动被撑开。

现在,我们假设这个div的高度是240像素,对于这种情况,我们可以使用:

.mydiv {
    height:auto !important;
   
    min-
}
说明:
IE6 识别不了 height:auto !important 和 min-,因此它的高度是240px,前面说过,IE6内容超出时 div 的高度会随着内容的高度页变(自适应),IE7、Firefox、Opera、Chrome 可以识别 height:auto !important ,注意这个!important 关健字在 CSS 中的优先性是大于后面的 的,因此它的渲染结果中只接受了 height:auto !important 和 min-,这一句就可以理解为 height:auto, min-,就这样,很简单吧。

相关文章

精彩推荐