让IE6也有最小高度min-height的效果

时间:2021-04-15 19:43:58

布局过的人都知道CSS的最小高度min-height是个很有用的属性,它可以让很短的内容也有一个很合适的高度,使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢?我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。

众所周知,如果内容超过元素的高度,那么IE6是会自动增加元素的高度,即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让IE6也有最小高度min-height属性的效果。具体代码如下:

height:auto !important;
height:500px;
min-height:500px;

解释:height:auto !important定义元素的高度自动适应,并声明了权重;height:500px是为IE6准备的;min-height:500px为认识此属性的浏览器准备。这样:

1、IE6解释为元素的高度500px,超过500px后,IE6会自动增加元素的高度;

2、标准浏览器解释识别min-height:500px,虽然height:500px固定了元素的高度,但我们还有一句height:auto !important,它有可以让高度自动适应。

三句代码让IE6也有了最小高度min-height的效果,简单又实用,不错吧。

如果您有兴趣,你还可以查看《让IE6也有最大高度man-height的效果