我们一般讨论的自适应高度的DIV布局,都是指有背景区分的,但在我们的实际应用中,很少有网站这么用的,大多数都不是用背景区分的。但今天我们并 不是讨论它的实用性如何,而只讨论实现这种布局的一种较完美的解决方法。
顾名思义,所谓的自适应高度,就是某一列撑长而其它列的高度也跟随相应地被撑长,这个效果如果用table的话,轻而易举就完成了,而用DIV就没 这么容易了。之前也有试过不少的方法,比如用JS控制、padding-bottom 给个很大的负值……但都觉得不太理想。后来在一个国外的网站上看到一个,感觉这是目前为止比较满意的解决方法了,不用hack、不用JS、兼容性强……
原理很容易,理解之后应该可以解决很多这样的布局方案了。见上图,.colmask、.colmin、.colleft,分别为三列背景的容器,最 外层的 .colmask 设定 overflow:hidden;,通过相对定位分成三列。而内容容器 .col1、 .col2、 .col3 都放在最内层的 .colleft 里面,通过相对定位定好位置,所以不管 .col1、 .col2、 .col3 哪一个伸长或缩短,外部的 .colmask、.colmin、.colleft 都会跟着伸长与缩短,也就实现了我们所要的效果了。
看看演示效果:
完美的DIV三行三列自适应高度布局body {
margin:0;
padding:0;
font-size:12px;
}
.header {
width:100%;
height:50px;
background:#EEE;