- Колонки однакової висоти за допомогою позиціонування
- опис прикладу
- Колонки однакової висоти за допомогою фонового зображення
- опис прикладу
- опис прикладу
Опубліковано: 12.05.2011 Остання правка: 16.12.2015
На цій сторінці описані приклади, що дозволяють зробити колонки однакової висоти в макетах з блочною версткою. Для багатьох початківців верстальників це є певною проблемою, адже якщо в колонках макета висота не вказана явно, то вони витягуються рівно настільки, щоб вмістити свій вміст. Відповідно виходить, що замість однакової висоти, кожна колонка в макеті має свою, що виглядає не дуже красиво.
Колонки однакової висоти за допомогою позиціонування
Цей приклад побудований на принципі додаткових псевдоколонок і абсолютного позиціонування. Для цього створюється кілька блоків (за кількістю колонок), які розтягуються на всю висоту сторінки і підкладаються під справжні колонки. Для того, щоб з'явився ефект колонок однакової висоти, цим псевдоколонкам задається необхідний фоновий колір.
<! 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 все тягнеться, як годиться.
