DIV-колонки однакової висоти на CSS

Дмитро Сахань

При роботі з початкуючими вебмайстрами, які хочуть створити каркас сторінки інтернет-магазину за вимогами клієнта, час від часу доводиться допомагати з найдрібнішими деталями і надавати легкі рішення для нетипових завдань.

Одне з таких - автоматичне вирівнювання висоти колонок сайту за допомогою DIV-вірстки без використання JavaScript, схоже на таблиці вірстку.

Пропоную просте рішення на основі двох стилів і одного контейнера на сторінці. Рішення підходить для багатьох браузерів, за винятком IE6-IE7, і може бути адаптоване під браузери без підтримки CSS3.

Пояснення рішення

Припустимо, є така розмітка: шапка, три колонки (ліва, центральна, права) і підвал сторінки.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Колонки</title>
 </head>
 <body>
  <div id="header"></div>

  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>

  <div id="footer"></div>
 </body>
</html>

Спочатку обгортаємо майбутні колонки в DIV-контейнер. Наприклад, дамо йому ідентифікатор columns.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Колонки</title>
 </head>
 <body>
   <div id="header"></div>

   <div id="columns">
     <div id="left"></div>
     <div id="center"></div>
     <div id="right"></div>
   </div>

  <div id="footer"></div>
 </body>
</html>

Залишилося додати наступне в стилі сайту:

#columns {
    display: table;
    width: 100%;
    box-sizing: border-box;  
    margin-left: 0;
    margin-right: 0;
}

#columns > div,
#columns > noindex > div {
    display: table-cell;
    vertical-align: top;
    width: auto;
    box-sizing: border-box;  
}

Тут ми вказали браузеру, що контейнер повинен відображатися як таблиця на всю ширину батька і ячейки таблиці мають вирівнюватися по вертикалі, а їх ширина має підлаштовуватися автоматично.

У CSS2 властивість box-sizing не підтримується, тому для старих браузерів, якщо потрібно вказати розміри ячейок, це слід робити враховуючи значення border і padding.

Тепер, якщо, наприклад, ми хочемо зробити бокові колонки фіксованого розміру, просто вказуємо потрібні обмежувальні розміри. Наприклад, ліва колонка - 300 пікселів, а права - 200 пікселів з обрізанням зайвих частин контенту.

#columns > #left,
#columns > noindex > #left {
    max-width: 300px;
    min-width: 300px;
    width: 300px;
}

#columns > #right,
#columns > noindex > #right {
    max-width: 200px;
    min-width: 200px;
    width: 200px;
    overflow: hidden;
}

Додаткове вказання належності об'єктів, як в показаному прикладі, необхідне для забезпечення виконання стилів тільки на конкретні колонки, що належать безпосередньо до контейнера. Додаткове включення випадку з тегом noindex необхідне для обробки ситуації, коли SEO-спеціаліст вирішив закрити окрему колонку від індексації пошуковими системами.

Очевидні переваги

  • проста реалізація;
  • гарантована однакова висота колонок;
  • легке переміщення колонок за потреби;
  • легко додавати або видаляти колонки;
  • можна легко приховати колонки від індексування за допомогою тегу noindex;
  • це не рішення з використанням float, тому відсутній недолік "перескоку колонки на новий ряд".

Недоліки

  • не працює в браузерах IE6, IE7 - вони початково не підтримують властивість display: table у стилях;
  • в браузері Safari 3.1 потрібна подвійна обгортка DIV-ами - тут властивість display: table-cell дочірнього об'єкта першого покоління працює лише при наявності пари батьківських контейнерів, вкладених один в одного з властивостями display: table і display: table-row;
  • не можна використовувати бічні margin-відступи у обгортковому DIV, якщо одночасно вказуємо йому ширину не у формі width: auto, оскільки браузер не бере до уваги розміри margin-відступів, отже правий край об'єкта "від'їде" далі від встановленого на величину незадекларованого відступу;
  • не можна задати margin-відступи для колонок, оскільки браузер ігнорує будь-яку маніпуляцію такими відступами в об'єктах з властивістю display: table-cell;
  • строго нерухома фіксація ширини колонок незалежно від ширини їх контенту (тобто коли край колонки не зміститься, навіть якщо нерозривні частини контенту вилізуть за край) зберігається лише при вказанні трьох обмежувальних розмірів (властивості width, min-width, max-width) в абсолютних одиницях, у той час як використання відносного розміру, скажімо 20%, не гарантує утримання ширини на нерозривній частині контенту, оскільки неявно дозволяє браузеру автоматично підлаштовувати ширину колонки в застосуванні надмірного простору сусідніх колонок з відносним або width: auto розміром.
SEO текст: Навчальний матеріал щодо автоматичного вирівнювання висоти колонок сайту за допомогою DIV-вірстки без використання JavaScript. Просте і ефективне рішення для створення структури сторінки інтернет-магазину.

Часті запитання