Question

This is my 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;
}  

I’d like the three div.col have the same height, and the height is page-height - 100,
how to do that without JavaScript?(just css)
play with the fiddle: http://jsfiddle.net/mdDwY/

Answer 1

How about using absolute positioning and use top and bottom on the columns.

Have a look here: http://jsfiddle.net/JYnrp/4/

The other thing you could do is use any of the equal height techniques like the one linked by Sinan and put a padding-bottom on the body of 100px to keep the columns 100px away from the bottom.

One more faux solution is if the 3 columns have simple background colors, then giving the wrapper a 1px high strip image with the 3 background colors in it and repeat-y that and then the columns will be different heights but will appear to be the same height.