Дуже часто при верстці макетів необхідно, щоб колонки мали однакову висоту. Це дуже легко реалізується при верстці таблицями, але в блокової верстці це завдання виконати трохи складніше.
Давайте розберемося, як же домогтися такого ефекту. Я наведу кілька способів верстки колонок однакової висоти. Кожен з них має свої плюси і мінуси. Можете вибрати той, який більше Вам підходить. Я, наприклад, користуюся кількома з цих способів, залежно від того, який макет верстаю.
Тож почнемо.
Перший спосіб.
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). 
Надаємо її в якості фону батьківського блоку #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; }
Можна створити і більше розтягуються колонок однакової висоти. Кожній з колонок можна задати своє бордер. Загалом, дуже гнучкий спосіб.
.
