Колонки однакової висоти

Дуже часто при верстці макетів необхідно, щоб колонки мали однакову висоту

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

Давайте розберемося, як же домогтися такого ефекту. Я наведу кілька способів верстки колонок однакової висоти. Кожен з них має свої плюси і мінуси. Можете вибрати той, який більше Вам підходить. Я, наприклад, користуюся кількома з цих способів, залежно від того, який макет верстаю.

Тож почнемо.

Перший спосіб.

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div id = "wrapper"> <! - Блок 1 -> <div id = "left"> <p> Contrary to popular belief , Lorem Ipsum is not simply random text. It has roots in a piece of classical literature from 45 BC, making it over 2000 years old. Richard McClintock, a professor at Hampden -Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature </ p> </ div> <! - Блок 2 -> <div id = "right"> <p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden -Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur </ p> </ div> </ div>

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #wrapper {width: 100%; overflow: hidden; } #Left {width: 30%; float: left; background-color: # 999999; padding-bottom: 30000px; margin-bottom: -30000px; } #Right {width: 70%; float: left; background-color: # 99CC99; padding-bottom: 30000px; margin-bottom: -30000px; }

Ми задаємо нижній padding: padding-bottom: 30000px; і такий же негативний margin: margin-bottom: -30000px; А обгортають їх блоку #wrapper призначаємо overflow: hidden.

Другий спосіб.
Даний спосіб полягає у використанні фонової картинки для блоку-батька і підходить тільки для верстки калонок фіксованою ширини.

Створюємо картинку по ширині колонок висотою 1px (bg.png).
Створюємо картинку по ширині колонок висотою 1px (bg
Надаємо її в якості фону батьківського блоку #wrapper і повторюємо по вертикалі і виходить, що колонки просто накладаються на фон і виникає ефект рівних по висоті колонок.

HTML:

1 2 3 4 5 6 <div id = "wrapper"> <div class = "left"> Контент </ div> <div class = "center"> Контент </ div> <div class = "right"> Контент < / div> <div class = "clear"> </ div> </ div>

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 #wrapper {background-image: /bg.png; background-repeat: repeat-y; width: 900px; margin: 0 auto; } .Left {float: left; width: 200px; } .Content {float: left; width: 400px; } .Right {float: left; width: 300px; } .Clear {clear: both; }

Третій спосіб.
Цей спосіб полягає у використанні властивості display: table- *. Код виглядає наступним чином:
HTML:

1 2 3 4 5 6 <div id = "wrapper"> <div id = "container"> <div id = "left"> Перша колонка </ div> <div id = "right"> Друга колонка </ div> </ div> </ div>

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #wrapper {width: 100%; display: table- cell; } #Container {display: table- row; } #Left {width: 200px; display: table- cell; background: red; } #Right {width: 700px; display: table- cell; background: blue; }

Цей метод досить хороший, але він не працює в IE6 / 7, так як вони не «розуміють» властивостей table-cell і table-row.

Четвертий спосіб - використання обгортають блоків.
Метод полягає в створенні блоків-обгорток по числу наявних колонок.
HTML:

1 2 3 4 5 6 7 8 9 <div class = "fon3"> <! - фон для правої колонки -> <div class = "fon2"> <! - фон для центральної колонки -> <div class = "fon1"> <! - фон для лівої колонки -> <div class = "leftColumn"> Ліва колонка </ div> <div class = "centerColumn"> Центральна колонка </ div> <div class = "rightColumn "> Права колонка </ div> </ div> </ div> </ div>

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 .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%; }

Автор даного метода- Matthew Taylor. Оригінал статті можна подивитися тут . Даний метод хороший тим, що він кроссбраузерен, не використовує картинок, застосуємо до гумової верстки.

П'ятий спосіб.
Ще одне рішення проблеми навів у своєму блозі Сергій Чікуёнок . Ось код:

HTML:

1 2 3 4 5 6 7 <div class = "col-wrap1"> <div class = "col-wrap2"> <div class = "col1"> left column </ div> <div class = "col2"> center column </ div> <div class = "clear"> </ div> </ div> </ div>

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 .col-wrap1 {width: 25%; background: blue; } .Col-wrap2 {width: 200%; margin-right: - 100%; / * Щоб IE6 не відділяться контейнер * / position: relative; left: 100%; background: red; } .Col1 {float: left; width: 50%; margin-right: - 100%; position: relative; left: - 50%; } .Clear {clear: both; font-size: 0; overflow: hidden; }

Можна створити і більше розтягуються колонок однакової висоти. Кожній з колонок можна задати своє бордер. Загалом, дуже гнучкий спосіб.

.