Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

Колонки одинаковой высоты

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

Для большей наглядности, во всех примерах используются макеты с прижатым футером. Поэтому обращаю ваше внимание на то, что некоторые блоки или свойства 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>

Результат примера

Описание примера

Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков:

Колонки одинаковой высоты с помощью фонового изображения

Данный пример самый простой в реализации и заключается в том, что создается небольшое «горизонтальное» изображение, состоящее из нескольких цветов (по количеству колонок), которое затем «размножается» по вертикали, имитируя колонки. К сожалению, способ подходит только для фиксированных макетов, к тому же не стоит забывать, что в браузере с отключенными картинками никаких колонок не будет.

<!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%;
    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" "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%;
    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 все тянется, как положено.