Развернуть дочерний div до высоты родителя?

Question

У меня есть div, высота которого я хочу установить так же, как высота родительского div. Это то, что я хочу: Jpg example

Это пример кода:

<div id="parent"> 
<div id="header">111</div> 
<div id="menu">222</div> 
<div id="content">333</div> 
</div> 

Родитель имеет высоту: 100%. Я хочу, чтобы меню div (серый) расширялось до нижней части экрана.

Answer 1

Метод «One True Layout» мой любимый, когда дело доходит до чистого CSS ... Oldy, но в Гуди http://www.positioniseverything.net/articles/onetruelayout/print.html

#one-true { overflow: hidden; } 
#one-true .col { 
     width: 50%; //or whatever 
     padding: 30px 10% 0; //or whatever 
     float: left; 
     margin-bottom: -99999px; //important! 
     padding-bottom: 99999px; //important! 
} 
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; } 
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; } 
#one-true .col:nth-child(3) { left: 0; background: #eee; } 
#one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */ 

Просто убедитесь, что вы назначили общий класс для любых элементов, которые вы хотите это высота применяется. Вы также можете использовать jQuery для достижения того же конца, что и я делаю, если мне нужно убедиться, что они одинаковой высоты программно.

Для выбора немедленные детей:

$('#parent > div').height($('.col').height()); 

Или все дети:

$('.col').children('*').height($('.col').height()); // be careful with borders and padding!