如何让3 div列扩展高度直到达到页面底部？

Question

这是我的HTML：

<div class="head" style="height: 100px;"></div>  
<div class="wrapper">  
    <div class="col">col1</div>  
    <div class="col">col2</div>  
    <div class="col">col3</div>  
</div>  

css：

.col{
    float: left;  
    width: 100px;
}  

我希望三个div.col具有相同的高度，高度为page-height - 100，
如何在没有JavaScript的情况下做到这一点？（只是css）
和小提琴一起玩：http://jsfiddle.net/mdDwY/

Answer 1

如何使用绝对定位并在列上使用顶部和底部。

看看这里：http://jsfiddle.net/JYnrp/4/

你可以做的另一件事就是使用任何一种相同高度的技术，比如Sinan连接的技术，并在100px的主体上放置一个填充底部，以使柱子保持距离底部100px。

另一个虚假解决方案是，如果3列具有简单的背景颜色，那么给包装器提供1px高条带图像，其中包含3种背景颜色并重复y，然后列将是不同的高度但是看起来像是相同的高度。

Answer 2

Matthew James Taylor的Equal Height Columns with Cross-Browser CSS是一个旧的待命。