css怎么设置最大高度和最小高度

html-css023

css怎么设置最大高度和最小高度,第1张

布局过的人都知道CSS的最小高度min-height是个很有用的属性,它可以让很短的内容也有一个很合适的高度,使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢?我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。众所周知,如果内容超过元素的高度,那么IE6是会自动增加元素的高度,即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让IE6也有最小高度min-height属性的效果。具体代码如下:height:auto !importantheight:500px解释:1、由于IE6对!important的解释存在bug,所以它只识别height:500px这一句,超过500px后,IE6自身会增加盒子的高度;2、IE7和其他标准浏览器三句都能识别,虽然定义height:500px,但我们又有了height:auto !important,所以超过500px也能自动增加盒子的高度。三句代码让IE6也有了最小高度min-height的效果,简单又实用,不错吧。

给ie6加个高度,这样ie6里它的高度确定了,如果比这个高度小就认这个高度,如果超出这个高度会自动伸展

min-height:200px_height:200px

看见网上也有加height:auto !important和overflow:visible的,都是为了超出高度的时候不至于出问题,我暂时没有遇到过,你可以参考着看加哪个合适。

min-height:200px /*高度最小值设置为:100px*/

height:auto !important/*兼容FF,IE7也支持 !important标签*/

height:200px/*兼容ie6*/

overflow:visible

这个代码比较简单

代码如下

min-height:400px//(解决ie8.9.ff.chrome)

*+height:100% //(解决ie7)

_height:400px//(解决ie6) ie6超出自动溢出

代码都有注释,只为了大家能看的更清晰更明白,