Автор: Євген Рижков Дата публікації: 04.02.2009
завдання
Зробити колонки однакової висоти, використовуючи блокову верстку.
Досить часто зустрічаються дизайни, коли колонки повинні рівномірно тягнутися по вертикалі. Приклад такого макета . У табличній верстці дві і більше колонок однакової висоти проблем не викликають. При блокової доводиться думати або шукати рішення в інтернеті.
рішення
Рішення 1 - використання фонової картинки
переваги:
- кроссбраузерность
- Дійсний код
- мінімум додаткових блоків
- підвал притискається до низу без проблем (при використанні прийому з « Притискаємо підвал до низу »)
недоліки:
- додатковий файл-картинка для фону
- підходить тільки для блоків фіксованої ширини
Автор методу Dan Cederholm. першоджерело . Застосовується лише для колонок фіксованої ширини.
Метод заснований на тому, що блок батько матиме висоту рівну висоті більш високою колонки (за умови, що колонки не використовують абсолютне позиціонування).
Створюємо зображення для фону блоку-батька: 
Для наочності товщина лінії взята більше, ніж требуется.В «бойових» умовах досить лінії висотою в 1px.
<Div class = "fon"> <! - блок-батько з фоновою картинкою -> <div class = "leftColumn"> ... текст ... </ div> <div class = "centerColumn"> .. .текст ... </ div> <div class = "rightColumn"> ... текст ... </ div> </ div> .fon {width: 650px; / * Ширина трьох блоків * / background: url (path-to / fon.png) repeat-y; / * Фонова картинка. повторюється по вертикалі * / float: left; / * Щоб не додавати div з style = "clear: both;" (Не завжди доречно це застосовувати) * /} .leftColumn {width: 200px; float: left; } .CenterColumn {width: 200px; float: left; } .RightColumn {width: 250px; float: left; }
результат .
Перевірено в:
Рішення 2 - margin + padding + overflow
переваги:
- підходить для гумової верстки
- не потрібна додаткова картинка
- Дійсний код
- мінімум додаткових блоків
недоліки:
- не працює в Opera 8, через невірне трактування overflow: hidden;
Суть методу - створити колонки дуже великої висоти, «зайве» обрізати блоком-батьком з допомогою overflow: hidden.
<Div class = "fon"> <! - блок-батько -> <div class = "leftColumn"> ... текст ... </ div> <div class = "centerColumn"> ... текст. .. </ div> <div class = "rightColumn"> ... текст ... </ div> </ div> .fon {width: 650px; overflow: hidden; / * Щоб лішее обрізати * /} .leftColumn {width: 200px; float: left; background: # 3d2af0; padding-bottom: 20000px; margin-bottom: -20000px; } .CenterColumn {width: 200px; float: left; background: # e34456; padding-bottom: 20000px; margin-bottom: -20000px; } .RightColumn {width: 250px; float: left; background: # e3e244; padding-bottom: 20000px; margin-bottom: -20000px; }
результат .
Перевірено в:
Метод 3 - використання обгортають блоків
переваги:
- повна кроссбраузерность
- застосуємо до гумової верстки
- не використовуються картинки
- Дійсний код
недоліки:
- додаються блоки по числу колонок
- поки не ясно як притиснути підвал при каркасі на цьому методі
Автор методу - Matthew Taylor. Повний переклад - тут . Суть методу - зробити блоків-обгорток по числу колонок.
<Div class = "fon3"> <! - фон для правої колонки (жовтий) -> <div class = "fon2"> <! - фон для центральної колонки (червоний) -> <div class = "fon1 "> <! - фон для лівої колонки (синій) -> <div class =" leftColumn "> ... ліва колонка ... </ div> <div class =" centerColumn "> ... центральна колонка. .. </ div> <div class = "rightColumn"> ... права колонка ... </ div> </ div> </ div> </ div> .fon1 {/ * фон для лівої колонки (синій) * / width: 100%; background: # 3d2af0; float: left; / * Робимо все обгортки плаваючими блоками щоб уникнути додавання блоку з clear: both; * / Position: relative; / * Щоб мати можливість змістити фон * / right: 30%; / * Оголяємо червоний фон для центральної колонки. 30% - ширина центральної колонки * /} .fon2 {/ * фон для центральної колонки (червоний) * / width: 100%; background: # e34456; float: left; position: relative; right: 40%; / * Оголяємо жовтий фон для правої колонки. 40% - ширина правої колонки * /} .fon3 {/ * фон для правої колонки (жовтий) * / width: 100%; background: # e3e244; float: left; } .LeftColumn {width: 30%; float: left; overflow: hidden; / * Страховка від ломки верстки об'єктами ширше розміру колонки-батька * / position: relative; left: 70%; / * Повертаємо колонки з контентом на свої позиції. 70% - сума зсувів обгорток fon1 і fon2 * /} .centerColumn {width: 30%; float: left; overflow: hidden; position: relative; left: 70%; } .RightColumn {width: 39%; float: left; overflow: hidden; position: relative; left: 70%; }
результат .
Перевірено в:
