Обучение
продвижению сайтов
+7 (812) 9-515-415

Высота блока div

Довольно часто верстальщики сталкиваются с задачей растяжения тега div по высоте. Проблем обычно две.

2. Растянуть div на всю высоту страницы.

Для этого нужно установить высоту 100% для тегов head и body, а затем задать минимальную высоту тегу div. Минимальную, чтобы он мог растягиваться и дальше, если содержимого больше, чем на экран.

html, body {
height: 100%;
margin: 0;
padding: 0;
}

div {
min-height:100%;
}

2. Div не растягивается по содержимому

Если внутри тега div будет просто текст или список или какой-нибудь другой тег со свойствами не выводящими его из потока, то все будет хорошо и div растянется как надо. Но если, например, для верстки в 3 столбца, внутри окажутся элементы div с указанным float:left, то содержащий их div перестанет растягиваться по содержимому. Потому что float выводит элементы из потока.

Первое решение заключается в установке родительскому тегу overflow со значением hidden или auto

<div class="d0">
 <div class="d1"></div>
 <div class="d1"></div>
 <div class="d1"></div>
</div>  

 

.d0 {
overflow: hidden;
}
.d1 {
width:33%;
float:left;
}

Второе решение: добавление после плавающих элементов еще одного div со свойством clear:both

<div class="d0">
 <div class="d1"></div>
 <div class="d1"></div>
 <div class="d1"></div>
 <div class="clear"></div>
</div>  

 

.d0 {
overflow: hidden;
}
.d1 {
width:33%;
float:left;
}
.clear {
clear:both;
}

Модифицированный второй способ. Вместо дополнительного блока с clear:both, основной блок делают самочищающимся с помощью псевдоселекторов :after и :before

<div class="d0 clear-fix">
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</div>

 

.clear-fix:before, .clear-fix:after {
content: " ";
display: table;
}
.clear-fix:after {
clear: both;
}
/* Для стареньких IE 6 и 7, если кому-то еще вдруг актуально */
.clear-fix {
*zoom: 1;
}

 

К размышлению
Оглавление