HTML变列自适应布局三行,完美的DIV三行三列自适应高度布局

我们一般讨论的自适应高度的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;