Web-дизайн 
No Comments Колонки одинаковой высоты
Колонки одинаковой высоты
На этой странице описаны примеры, позволяющие сделать колонки одинаковой высоты в макетах с блочной версткой. Для многих начинающих верстальщиков это является определенной проблемой, ведь если в колонках макета высота не указана явно, то они вытягиваются ровно настолько, чтобы вместить свое содержимое. Соответственно получается, что вместо одинаковой высоты, каждая колонка в макете имеет свою, что выглядит не очень красиво.
Для большей наглядности, во всех примерах используются макеты с прижатым футером. Поэтому обращаю ваше внимание на то, что некоторые блоки или свойства CSS, которые участвуют в создании колонок одинаковой высоты, уже изначально присутствуют в макетах. То есть в итоге они выполняют двойные функции — и футер к низу прижимают и колонки тянуть. Однако для большего удобства только те свойства, которые тянут колонки, будут снабжаться CSS-комментариями, причем неважно используются ли они еще для каких-то целей или нет.
Колонки одинаковой высоты с помощью позиционирования
Этот пример построен на принципе дополнительных псевдоколонок и абсолютного позиционирования. Для этого создается несколько блоков (по количеству колонок), которые растягиваются во всю высоту страницы и подкладываются под настоящие колонки. Для того, чтобы появился эффект колонок одинаковой высоты, этим псевдоколонкам задается необходимый фоновый цвет.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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>