Блог

Это мой 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 /

Как насчет использования абсолютного позиционирования и использования top и bottom для столбцов.

Посмотрите здесь: http://jsfiddle.net/JYnrp/4 /

Еще одна вещь, которую вы могли бы сделать, это использовать любой из методов равной высоты, например, связанный Sinan, и поместить padding-bottom в тело размером 100 пикселей, чтобы столбцы находились на расстоянии 100 пикселей от дна.

Еще одно искусственное решение заключается в том, что если 3 столбца имеют простые цвета фона, то придайте оболочке изображение полосы высотой 1 пиксель с 3 цветами фона в нем и повторите-y, и тогда столбцы будут разной высоты, но будут казаться одинаковой высоты.

Столбцы одинаковой высоты Мэтью Джеймса Тейлора с кроссбраузерным CSS — это старый резерв.