100% высота css

Question

У меня есть 3 divs бок о бок, которые вложены в контейнер div. Каждый div будет иметь различный контент на разных страницах, поэтому мне нужно, чтобы каждый из вложенных divs растягивался до высоты div с наибольшим количеством контента. Я пробовал использовать «height: 100%» и «height: auto», но ни один из них не работает. Может кто-нибудь помочь мне или указать мне в правильном направлении, пожалуйста. Мой html:

<div id="container"> 
    <div id="column1"></div> 
    <div id="column2"></div> 
    <div id="column3"></div> 
</div> 

Большое спасибо заранее.

Answer 1

Использование display: table-cell на всех 3-х внутренних дивы:

#container div { display: table-cell; } 

Вот Working Example.

Answer 2

Вы можете использовать JQuery?

Если да попробовать: http://jsfiddle.net/Rnf82/2/

Проблема с {дисплея: таблицы-клетки;} является то, что оно не поддерживается старыми версиями IE

Answer 3

Хотя ответ Истины является лучшим, certain browsers (обычные подозреваемые) не корректно реализуют табличную ячейку.

Решения обо всех браузерах - это назначение слишком большого количества вертикальной прокладки и обратного поля. Например:

<div class="container"> 
    <div class="column" style="background: #cc0000;">blah</div> 
    <div class="column" style="background: #00cc00;">blah<br />blah<br />blah</div> 
    <div class="column" style="background: #0000cc;">blah<br />blah</div> 
</div> 

И CSS:

.container { 
    width: 300px; 
    height: auto; 
    overflow: auto; 
} 

.container div.column { 
    float: left; 
    width: 100px; 
    height: auto; 
    padding: 0 0 1000px 0; 
    margin: 0 0 -1000px 0; 
}