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