Высота блока div
Довольно часто верстальщики сталкиваются с задачей растяжения тега div по высоте. Проблем обычно две.
1. Растянуть 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
.d0 {
overflow: hidden;
}
.d1 {
width:33%;
float:left;
}
Второе решение: добавление после плавающих элементов еще одного div со свойством clear:both
.d0 {
overflow: hidden;
}
.d1 {
width:33%;
float:left;
}
.clear {
clear:both;
}
Модифицированный второй способ. Вместо дополнительного блока с clear:both, основной блок делают самочищающимся с помощью псевдоэлементов ::before и ::after
.clear-fix:before, .clear-fix:after {
content: " ";
display: table;
}
.clear-fix:after {
clear: both;
}
/* Для стареньких IE 6 и 7, если кому-то еще вдруг актуально */
.clear-fix {
*zoom: 1;
}