4 методу створення колонок однакової висоти

1. фіктивні колонки
2. HTML
3. CSS
4. плюси
5. Псевдоколонкі
6. HTML
7. CSS
8. плюси
9. Межі і негативні відступи
10. HTML
11. CSS
12. плюси
13. Зсув колонок і контейнера
14. HTML
15. CSS
16. плюси
17. додаткові ресурси
18. резюме

оригінал: http://www.vanseodesign.com/css/equal-height-columns/

Переклад: Влад Мержевіч

Одна з небагатьох речей, яку не так просто зробити за допомогою CSS - це створення колонок однакової висоти. Існують різні підходи, у кожного з них є свої плюси і мінуси, тут я хочу показати чотири методи.

Ми можемо досягти цього додаючи фон позаду колонок, щоб вони здавалися рівної висоти. В результаті отримаємо фіктивну однакову висоту.

Бажають відразу дивитися демонстрацію і код можуть клацнути на будь-якому зображенні тим, хто попереду кожним розділом нижче або звернутися до відповідного демо.

фіктивні колонки

фіктивні колонки існують вже довгий час. З 2004 року, якщо бути точним. За цей час вони були і, можливо, все ще залишаються методом де-факто для створення колонок однакової висоти.

Цей простий трюк використовує фонове зображення яке повторюється по вертикалі. Приклад такого зображення показаний нижче. Я збільшив висоту для наочності.

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

HTML

У цьому прикладі ми будемо використовувати HTML, схожий на той, з чим ми вже працювали, хоча я пропущу шапку і підвал, щоб зосередитися на шпальтах.

<Div id = "container"> <div id = "sidebar"> <p> Бічна панель </ p> </ div> <div id = "content"> <p> Основний контент </ p> </ div> </ div>

Ви можете використовувати в якості контейнера body, але я віддаю перевагу застосовувати контейнер div. Так ви зможете побачити, що ця техніка працює для створення колонок всередині загального макета, а не тільки самостійно.

CSS

#container {width: 960px; margin: 0 auto; background: url ( "faux-columns.png") repeat-y; overflow: hidden; } #Sidebar {float: left; width: 340px; } #Content {float: left; width: 620px; }

CSS досить простий. Налаштування width і float для #sidebar і #content вже повинні бути вам знайомі, також як настройка width і margin для #container. Новим тут є додавання фонового зображення і застосування overflow: hidden для контейнера. Нам потрібно встановити властивість overflow, щоб контейнер div НЕ схлопнув і розкрити назад все всередині плаваючих елементів.

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

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

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

плюси

• Легко налаштовувати.
• Працює незалежно від того, який стовпець вище або нижче.

мінуси

• Необхідна картинка яка створює додатковий HTTP-запит.
• Будь-яка зміна макета вимагає переробки зображення.
• Потрібно заздалегідь знати, як буде виглядати макет для створення зображення.

Псевдоколонкі

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

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

HTML

Ми використовуємо той же HTML, що і в методі фіктивних колонок вище.

<Div id = "container"> <div id = "sidebar"> <p> Бічна панель </ p> </ div> <div id = "content"> <p> Основний контент </ p> </ div> </ div>

CSS

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

#container {background: # 555; overflow: hidden} #content {float: left; width: 75%; background: #eee; } #Sidebar {float: left; width: 25%; background: # 555; }

Крім використання% замість px зауважте, що я задав колір фону для #content і #sidebar. Вам залишається тільки встановити його для будь-якої колонки, яка буде вище, але тут я спеціально поставив колір для двох колонок.

Основна зміна в порівнянні з фіктивними колонками - замість фонового зображення ми встановлюємо колір фону. В принципі, це те ж саме, що показувати колір фону контейнера крізь коротку колонку.

Обмеження наступне - ми заздалегідь повинні знати, яка колонка буде коротше і в ідеалі ця колонка повинна бути такою на всіх сторінках сайту. Звучить, як досить серйозне обмеження, але на практиці, я вважаю, одна з двох колонок зазвичай коротше на більшості, якщо не на всіх, сторінках. На тих сторінках, де це не так, для виправлення досить просто додати більше або менше контенту.

плюси

• Просто налаштувати.
• Легко обслуговувати.

мінуси

• Складніше реалізувати для трьох і більше колонок.
• Потрібно заздалегідь знати висоту колонок.
• Чи не працює, коли колонки вище або коротше на різних сторінках.

Цей метод далекий від досконалості, але ви здивуєтеся, наскільки часто він може застосовуватися на практиці.

Межі і негативні відступи

На цей метод я натрапив не так давно на Smashing Magazine в статті Тьєррі Кобленца, хоча пізніше знайшов статтю Алана Пірса на A List Apart , Написану кілька років тому про це ж методі. Використовуються кордону і негативні відступи, щоб створити видимість колонок рівної висоти.

HTML

Нічого нового в HTML немає в порівнянні з тим, що ми бачили вище. У своїй статті Тьєррі застосовує в якості контейнера body, але я буду дотримуватися використання контейнера div як роблю це зазвичай.

<Div id = "container"> <div id = "sidebar"> <p> Бічна панель </ p> </ div> <div id = "content"> <p> Основний контент </ p> </ div> </ div>

CSS

В CSS починається найцікавіше. Контейнер просто використовується для фіксації ширини і вирівнювання макета по центру. Цікаве відбувається з #content і #sidebar.

#container {width: 960px; margin: 0 auto; } #Content {float: left; width: 700px; border-left: 260px solid # 555; } #Sidebar {float: left; width: 260px; margin-right: -260px; position: relative; }

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

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

Спочатку дамо бічній панелі негативний правий margin рівний її ширині (або ширині лівої межі контенту, вони однакові). Це поверне бічну панель туди, куди ми і хочемо, але вона як і раніше не видно. проблема в порядок накладення двох Дивов. #content розташовується поверх #sidebar, так що ми повинні перемістити #sidebar на передній план. Зробимо це шляхом додавання position: relative для бічній панелі і тепер його зміст стає видно.

плюси

• Працює незалежно від того, яка колонка вище або коротше.
• Проста настройка, після того як ви розумієте, як це працює.
• Легко обслуговувати.

мінуси

• Ширина бічній панелі повинна бути фіксована, оскільки border-width розуміє тільки абсолютні значення.
• Негативні margin потенційно можуть привести до помилки в деяких старих версіях IE.

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

Зсув колонок і контейнера

Останній метод створив Метью Джеймс Тейлор . З усіх методів представлених тут, на цей раз він буде працювати в самих різних випадках використання.

Я залишив його на кінець, так як метод трохи складний і вам, можливо, доведеться прочитати кілька разів для розуміння як він працює.

HTML

HTML схожий на те, що ми бачили вище, хоча ви помітите додатковий контейнер div.

<Div id = "container-outer"> <div id = "container-inner"> <div id = "sidebar"> <p> Бічна панель </ p> </ div> <div id = "content"> < p> Основний контент </ p> </ div> </ div> </ div>

Як і в інших методах, ми будемо використовувати ці контейнери для установки фонових кольорів, які з'являться, немов вони належать нашим колонок.

CSS

В CSS відбувається дещо більше, ніж ми бачили до цього моменту. Для #sidebar і #content задається float із значенням left і встановлюється ширина, все інше крім цього є новим.

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

# Container-outer {float: left; overflow: hidden; background: #eee; } # Container-inner {float: left; background: # 555; position: relative; right: 75%; } #Sidebar {float: left; width: 25%; position: relative; left: 75%; } #Content {float: left; width: 75%; position: relative; left: 75%; }

Перший крок - додати float до колонок і контейнерів. Я застосовую значення left, але напрямок в даному випадку не важливо. Використовуйте напрямок необхідне для вашого макета. Наступним кроком є ​​установка фонів для двох контейнерів div. Я ставлю фон для # container-inner щоб отримати бажане для бічній панелі і фон для # container-outer щоб отримати бажане для основного контенту.

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

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

# Container-inner {position: relative; right: 75%; }

Позиціонуємо внутрішню колонку і встановлюємо значення right на 75%, воно таке ж, як ширина колонки з контентом.

Фони на місці, але вміст обох колонок також зсувається на 75% вліво. Нам потрібно зрушити їх на місце.

#sidebar {position: relative; left: 75%; } #Content {position: relative; left: 75%; }

Ми знову застосовуємо відносне позиціонування і оскільки вміст обох колонок змістилося на 75% вліво, нам треба зрушити це назад на 75% вправо. Зробимо це установкою значення left в 75%. Тепер все повернулося назад, де і повинно бути.

плюси

• Працює незалежно від того, яка колонка вище або коротше.
• Працює з будь-яким типом макета (фіксованим, гумовим, еластичним і ін.).
• Можна зробити скільки завгодно колонок.

мінуси

• Трохи складно для першого розуміння.
• потрібні додаткові несемантічние діви.

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

У статті Метью йде макет з трьох колонок і у нього також є демонстрація для чотирьох і п'яти колонок. Я вирішив показати макет з двох колонок в надії що це зробить ідею простіше для розуміння.

додаткові ресурси

Це ні в якому разі не єдині методи створення колонок однакової висоти. Кріс Койєр деякий час назад поділився кількома іншими методами на CSS Tricks , Які ви можете віддати перевагу представленим тут.

Є також багато інших методів, які можна знайти трохи пошукавши. Думаю, що дана стаття і стаття Кріса охоплює більшість з найбільш поширених методів.

резюме

Колонки однакової висоти є бажаною рисою дизайну, але їх не завжди легко зробити за допомогою CSS-макетів . В ідеалі ми повинні були б використовувати щось на зразок height: 100% і на цьому все, але зараз ми можемо застосовувати будь-який з методів, згаданих вище.

Фіктивні колонки прості в налаштуванні, але потрібен додатковий HTTP-запит для зображення, а будь-яка зміна макета вимагає нової картинки.

Псевдоколонкі ще простіше, але мають обмежене застосування для випадків, коли відносна висота обох колонок відома і постійна на сторінках.

Межі і негативні відступи порівняно прості в роботі, не вимагають передбачення про висоту колонок і прекрасно адаптуються до кількох колонок. Тільки потрібно щоб одна колонка була фіксованою ширини.

Зсув колонок і контейнера працює в більшості випадків. Не потрібно попередньо знати про висоту колонок і можна працювати з будь-яким бажаним числом колонок. Цей метод трохи складніше інших.

Згодом я очікую більш простого стандартного рішення, але поки цих чотирьох методів має бути достатньо для вашого проекту.

Наскільки часто ви робите дизайн макета з колонками однакової висоти? Який метод створення колонок ви при цьому використовуєте?