Колонки одинаковой высоты
На этой странице описаны примеры, позволяющие сделать колонки одинаковой высоты в макетах с блочной версткой. Для многих начинающих верстальщиков это является определенной проблемой, ведь если в колонках макета высота не указана явно, то они вытягиваются ровно настолько, чтобы вместить свое содержимое. Соответственно получается, что вместо одинаковой высоты, каждая колонка в макете имеет свою, что выглядит не очень красиво.
Для большей наглядности, во всех примерах используются макеты с прижатым футером. Поэтому обращаю ваше внимание на то, что некоторые блоки или свойства CSS, которые участвуют в создании колонок одинаковой высоты, уже изначально присутствуют в макетах. То есть в итоге они выполняют двойные функции — и футер к низу прижимают и колонки тянуть. Однако для большего удобства только те свойства, которые тянут колонки, будут снабжаться CSS-комментариями, причем неважно используются ли они еще для каких-то целей или нет.
Колонки одинаковой высоты с помощью позиционирования
Этот пример построен на принципе дополнительных псевдоколонок и абсолютного позиционирования. Для этого создается несколько блоков (по количеству колонок), которые растягиваются во всю высоту страницы и подкладываются под настоящие колонки. Для того, чтобы появился эффект колонок одинаковой высоты, этим псевдоколонкам задается необходимый фоновый цвет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - колонки одинаковой высоты, позиционирование</title>
<style type="text/css">
html, body {
height: 100%; /* высота HTML и BODY */
margin: 0;
padding: 0;
}
body {
font-size: 2em;
color: #000;
background: #fff;
}
#wrapper {
min-height: 100%; /* минимальная высота обертки */
height: auto !important; /* высота для всех, кроме IE6 */
height: 100%; /* минимальная высота для ИЕ6, т.к. он понимает height, как min-height */
position: relative; /* относительное позиционирование */
}
#header {
background: #fc0;
}
#menu {
width: 250px;
background: #0fc;
float: left;
padding-bottom: 100px;
}
#sidebar {
width: 200px;
background: #c0f;
float: right;
padding-bottom: 100px;
}
#content {
background: #eee;
margin: 0 200px 0 250px;
padding-bottom: 100px;
}
.clear {
clear: both;
}
#footer {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
color: #fff;
background: #000;
}
#menu_back, #sidebar_back, #content_back {
height: 100%; /* высота псевдоколонок */
height: expression(document.body.offsetHeight); /* высота для IE6 */
position: absolute; /* абсолютное позиционирование */
top: 0; /* нулево смещение от верха обертки */
z-index: -1; /* отрицательное значение z-index */
}
#content_back {
background: #eee;
left: 250px; /* псевдоколонка контента, смещение слева */
right: 200px; /* смещение справа */
}
#menu_back {
width: 250px; /* ширина псевдоколонки меню */
background: #0fc;
left: 0; /* нулевое смещение слева */
}
#sidebar_back {
width: 200px; /* ширина псевдоколонки сайдбара */
background: #c0f;
right: 0; /* нулевое смещение справа */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Шапка</div>
<div id="menu">Меню</div>
<div id="sidebar">Сайдбар</div>
<div id="content">Контент</div>
<div class="clear"></div>
<div id="footer">Футер</div>
<div id="menu_back"></div> <!-- псевдоколонка меню -->
<div id="sidebar_back"></div> <!-- псевдоколонка сайдбара -->
<div id="content_back"></div> <!-- псевдоколонка контента -->
</div>
</body>
</html>Описание примера
Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков:
Колонки одинаковой высоты с помощью фонового изображения
Данный пример самый простой в реализации и заключается в том, что создается небольшое «горизонтальное» изображение, состоящее из нескольких цветов (по количеству колонок), которое затем «размножается» по вертикали, имитируя колонки. К сожалению, способ подходит только для фиксированных макетов, к тому же не стоит забывать, что в браузере с отключенными картинками никаких колонок не будет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - колонки одинаковой высоты, фоновое изображение</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-size: 2em;
color: #000;
background: #fff;
}
#wrapper {
width: 1000px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url('images/back_column.png') repeat-y; /* фоновое изображение для обертки */
position: relative;
margin: 0 auto;
}
#header {
background: #fc0;
}
#menu {
width: 250px;
background: #0fc;
float: left;
padding-bottom: 100px;
}
#sidebar {
width: 200px;
float: right;
background: #c0f;
padding-bottom: 100px;
}
#content {
background: #eee;
margin: 0 200px 0 250px;
padding-bottom: 100px;
}
.clear {
clear: both;
}
#footer {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
color: #fff;
background: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Шапка</div>
<div id="menu">Меню</div>
<div id="sidebar">Сайдбар</div>
<div id="content">Контент</div>
<div class="clear"></div>
<div id="footer">Футер</div>
</div>
</body>
</html>Фоновое изображение, которое использовалось в примере можно увидеть здесь. Именно с помощью него была создана видимость колонок одинаковой высоты.
Описание примера
Колонки одинаковой высоты с помощью полей и отступов
В этом примере используется довольно необычная техника. Сначала всем колонкам задаются очень большие нижние отступы, из-за которых они растягиваются, а потом такие же по размеру, но отрицательные по значению нижние поля. В конце все, что является «лишним» — просто обрезается.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - колонки одинаковой высоты, поля и отступы</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-size: 2em;
color: #000;
background: #fff;
}
#wrapper {
width: 1000px;
min-height: 100%;
position: relative;
overflow: hidden; /* обрезаем все ненужное */
margin: 0 auto;
}
#header {
background: #fc0;
}
#menu {
width: 250px;
background: #0fc;
float: left;
padding-bottom: 30000px; /* нижний отступ для меню */
margin-bottom: -29900px; /* нижнее поле для меню */
}
#content {
width: 550px;
background: #eee;
float: left;
padding-bottom: 30000px; /* отступ */
margin-bottom: -29900px; /* поле */
}
#sidebar {
width: 200px;
background: #c0f;
float: left;
padding-bottom: 30000px; /* отступ */
margin-bottom: -29900px; /* поле */
}
.clear {
clear: both;
}
#footer {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
color: #fff;
background: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Шапка</div>
<div id="menu">Меню</div>
<div id="content">Контент</div>
<div id="sidebar">Сайдбар</div>
<div class="clear"></div>
<div id="footer">Футер</div>
</div>
</body>
</html>Описание примера
Этот метод кроссбраузерный и его понимают все, включая Internet Explorer 6. А вот совместно со способом, которым прижимался футер, он отказывается корректно работать. Я не стал придумывать очередные «костыли» для этого старичка, а наоборот убрал пару свойств, помогающих ему прижать футер. Поэтому при добавлении в колонки содержимого — в IE6 все тянется, как положено.