Div高度自适应

论坛: 

代码如下:

.div { width:300px; height:300px; height:auto; min-height:300px; }

这段CSS代码是利用CSS书写顺序和浏览器的特殊兼容性改变其对CSS的解析做到的,它可以在IE6、IE7、IE8、IE9、Chrome、FF等浏览器中正常显示。

下面来解释一下:

【height:300px】定义了div的高度为300像素,这句代码对所有浏览器有效。但div的内容超过300像素时,IE6浏览器中的容器会自动伸展,IE7、IE8、IE9、Chrome、FF等现代浏览器则不会向下伸展,内容溢出容器。

【height:auto】对IE6浏览器不起作用,但对IE7、IE8、IE9、Chrome、FF等浏览器起作用,可以修复溢出效果。

但到这一步由于auto起到了作用,在IE7、IE8、IE9、Chrome、FF中Div又没有了高度,所以在后面还要加一句【min-height:300px】来让这个div的最小高度为300像素。

这种方法看似没有用到CSS hack,但其实这也算是CSS hack的一种,因为它是利用CSS书写顺序达到的效果