Div колонки: 4 способи розтягнути div колонки по висоті

1. Спосіб 1: використання атрибута display: table
2. HTML розмітка
3. CSS стилі
4. Спосіб 2: використання JavaScript
5. HTML розмітка
6. CSS стилі
7. JavaScript (jQuery)
8. Спосіб 3: штучні колонки
9. HTML розмітка
10. CSS стилі
11. Спосіб 4: Використання окремих div елементів для фону кожної колонки
12. HTML розмітка
13. CSS код
14. PS

Раніше, коли для створення шаблонів використовували табличну верстку, створення колонок з однаковою висотою було дуже легким завданням. Все що потрібно було, створити три осередки в одному рядку - все! Але цей метод не прийнятний для наших днів, коли ми використовуємо CSS і DIV верстку.

У цій статті обговорюються деякі методи і техніки створення div колонок, а також їх вирівнювання по висоті. Вимоги до цих способів будуть прості - працездатність у всіх браузерах (навіть в IE6). Всі ці методи будуть реалізовані на 3 стовпчики div шаблоні.

Створимо шаблон, в якому все три div колонки будуть розтягнуті по однаковій висоті.

Спосіб 1: використання атрибута display: table

У цьому методі ми будемо використовувати список або один div блок, який буде містити набір колонок. Зовнішній div блок матиме атрибут display: table, всі внутрішні display: table-cell. За технологією, все колонки розтягнутися за єдиною висоті.

HTML розмітка

<Div class = "base"> <ul class = "base-row"> <li class = "cell1"> <div class = "content1"> ..... Багато контенту .... </ div> < / li> <li class = "cell1"> <div class = "content2"> ..... Багато контенту .... </ div> </ li> <li class = "cell1"> <div class = "content3"> ..... Багато контенту .... </ div> </ li> </ ul> </ div>

CSS стилі

.base {/ * Встановіть 100% width і 1000px min-width * / width: auto; margin-left: 0px; margin-right: 0px; min-width: 1000px; padding: 0px; display: table; } .Base-row {Display: table-row; } .Base li {display: table-cell; width: 33%; } .Cell1 {background-color: # f00; } .Cell2 {background-color: # 0f0; } .Cell3 {background-color: # 00f; }

переваги

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

Margin відступ в цьому випадку буде еквівалентом cellspacing в табличній верстці. Також можна використовувати ширину border (тільки колір виставити ідентично фону), або погратися з самої шириною колонок.

недоліки

Цей варіант не працює в IE7 і версіях нижче. Може пройти дуже довго часу, поки IE7 стане новою проблемою IE6 або IE5. Одним словом, не дуже прийнятний спосіб в плані кросбраузерності.

Спосіб 2: використання JavaScript

Цей метод грунтується на використанні JavaScript, який автоматично змінює висоту колонок. У цьому прикладі використаний jQuery для розтягування div колонок по висоті.

HTML розмітка

<Div class = "container"> <div class = "leftsidebar"> ... Багато контенту ... </ div> <div class = "content"> .... Багато контенту ... </ div> <div class = "rightsidebar"> ... Багато контенту ... </ div> </ div>

CSS стилі

.container {Width: 900px; Margin-left: auto; Margin-rightright: auto; } .Leftsidebar {Float: left; Width: 33%; }. content {Float: left; Width: 33%; }. content {Float: left; Width: 33%; }

JavaScript (jQuery)

function setEqualHeight (columns) {var tallestcolumn = 0; columns.each (function () {currentHeight = $ (this) .height (); if (currentHeight> tallestcolumn) {tallestcolumn = currentHeight;}}); columns.height (tallestcolumn); } $ (Document) .ready (function () {setEqualHeight ($ ( ". Container> div"));});

Ви можете винести код в окремий файл і підключити. Або прямо прописати в контексті HTML коду. Тільки переконайтеся, що код буде йти після підключення jQuery бібліотеки.

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

переваги

Не потрібно писати багато CSS коду, щоб розтягнути колонки по висоті. Також працює у всіх популярних браузерах.

недоліки

Якщо JavaScript не доступний браузеру, колонки не будуть розтягуватися. Не варто переживати з цього приводу ... спробуйте знайти сайт на якому немає JavaScript. Практично у 99,99% користувачів JavaScript доступний в браузері.

Спосіб 3: штучні колонки

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

HTML розмітка

<Div class = "container"> <div class = "left"> </ div> <div class = "content"> </ div> <div class = "right"> </ div> <div class = "clearer "> </ div> </ div>

CSS стилі

.container {background-image: tile.png; background-repeat: repeat-y; width: 900px; margin-left: auto; margin-right: auto; } .Leftsidebar {float: left; width: 200px; } .Content {float: left; width: 400px; } .Rightright {float: left; width: 300px; } .Clearer {clear: both; }

переваги

Це дуже просто, не потребує багато CSS коду.

недоліки

Ви не зможете змінювати ширину колонок. Якщо потрібно буде більше або менше колонок, доведеться перемальовувати фонове зображення і змінювати CSS код. Одним словом, доведеться все переробляти!

Спосіб 4: Використання окремих div елементів для фону кожної колонки

Цей принцип схожий на «Матрьошку», де ми будемо використовувати div елементи для фону кожної з колонок. Кожен div блок буде приймати висоту найбільшого з них. Загалом, зараз самі все побачите.

HTML розмітка

<Div class = "rightback"> <div class = "contentback"> <div class = "leftback"> <div class = "leftsidebar"> ... Багато контенту ... </ div> <div class = "content"> ... Багато контенту ... </ div> <div class = "rightsidebar"> ... Багато контенту ... </ div> </ div> </ div> </ div>

CSS код

.rightback {width: 100%; float: left; background-color: green; overflow: hidden; position: relative; } .Contentback {float: left; background-color: blue; width: 100%; position: relative; rightright: 300px; / * Ширина правої колонки * /} .leftback {width: 100%; position: relative; rightright: 400px; / * Ширина області центральної колонки * / float: left; background-color: # f00; } .Container {width: 900px; margin-left: auto; margin-right: auto; } .Leftsidebar {float: left; width: 200px; overflow: hidden; position: relative; left: 700px; } .Content {float: left; width: 400px; overflow: hidden; position: relative; left: 700px; } .Rightsidebar {float: left; overflow: hidden; width: 300px; background-color: # 333; position: relative; left: 700px; }

Виглядає складно, чи не так? Якщо ви засвоїте цей принцип, тоді зрозумієте що він дуже простий. Ця техніка заснована на наступних 5 ключових моментах:

1. .rightback, .contentback, і .leftback це зовнішні, обгортають div блоки таких елементів, як .leftsidebar, .content і .rightsidebar - які містять контент.
2. Кожен обгортають div блок служить фоном для кожного з контентсодержащіх.
3. Виключаючи самий зовнішній блок, всі інші div блоки мають відступ справа, який еквівалентний ширині колонки.
4. Внутрішні div блоки колонок (.leftsidebar, .content, .rightsidebar) мають обтікання зліва і певну ширину.
5. Вони мають відступ зліва, який еквівалентний сумі всіх значень ширини колонок, виключаючи найбільшу. Ось так = ширина rightsidebar (300px) і content (400px) = 700px (B + G).

Картинка знизу показує, як розміщені фонові div елементи .rightback, .contentback і .leftback. Найнижчий - .rightback, самий верхній - .leftback елемент.

Пунктиром позначена область перегляду контенту.

На наступній картинці, чорні лінії під червоною лінією - це div елементи контент блоків (leftsidebar, content, rightsidebar), вони будуть відображатися в разі отримання властивості float: left; і відповідної ширини.

Всі ці три елементи мають відступ зліва C, використовуючи відносне позиціонування.

C = B + G (дивіться зображення вище).

переваги

Цей спосіб розтягування div колонок по висоті працює у всіх браузерах, навіть в IE6. Цей метод не потребує JavaScript і досягається за допомогою чистого CSS і HTML коду.

недоліки

Він не настільки зрозумілий як інші. Але він найбільш прийнятний для створення великого числа колонок, як тільки ви його освоїте.

PS

Кожен спосіб створення div колонок має свої переваги і недоліки. Раджу використовувати останній, якщо ви шукаєте рішення на чистому CSS коді.

Якщо знаєте ще способи розтягування div колонок по висоті, радий буду дізнатися! Пишіть в коментарі!