- 1. Псевдоелемент і абсолютне позиціонування
- 2. Внутрішні і зовнішні відступи
- 3. За типом таблиці
- 4. Flexbox
- 5. Плагін matchHeight
- 6. jQuery функція css ()
У цьому уроці я приведу різні способи, що показують як можна зробити колонки однакової висоти. Всі варіанти будуть розібрані для двоколонковому макета сторінки, але вони також будуть працювати для трьох і більше колонок (з невеликою модифікацією). Частина прикладів реалізується на чистому CSS, інші використовують JavaScript. Ви можете подивитися кожен приклад в редакторі Codepen, клікнувши по картинці.
1. Псевдоелемент і абсолютне позиціонування
Суть даного способу наступна: за допомогою псевдокласу: after кожному стовпчику додається блок, який залитий відповідним кольором і має висоту, рівну 100% висоті блоку-контейнера. Для блоку-контейнера задано властивість overflow: hidden ;, яке і обрізає зайву висоту.
У медіазапросе, наприклад, для максимальної ширини 860px скасуємо обрізку вмісту контейнера, обтікання для колонок і приховуємо вміст, доданий за допомогою псевдокласу. Ширину колонок зробимо рівну ширині блоку-контейнера.
@media (max-width: 860px) {.container {overflow: visible; } .Main-content {float: none; margin-bottom: 30px; width: 100%; } Aside {float: none; width: 100%; } .Main-content div, aside div {padding: 30px; } .Main-content: after, aside: after {display: none; } Footer {margin-top: 0; }}
2. Внутрішні і зовнішні відступи
Для кожної колонки встановлюємо нижнє поле padding з великим значенням. В цьому випадку фон колонки буде поширюватися на всю висоту поля. Далі задаємо негативне нижнє поле з таким же значенням. З його допомогою ми зменшуємо висоту колонки до її фактичних розмірів, не зачіпаючи фонову заливку. Властивість overflow: hidden ;, заданий для блоку-контейнера, обрізає висоту кожної колонки, орієнтуючись на найвищу.
body {margin: 0; background: # FAF2D6; color: # 302E2D; } Header {padding: 30px 60px; background: # 80C8A0; } .Container {padding: 30px; overflow: hidden; } .Main-content {float: left; width: calc (100% - 330px); background: # C9CCC8; } Aside {float: right; width: 300px; background: # EC5A45; } .Main-content, aside {padding-bottom: 99999px; margin-bottom: -99999px; } .Main-content div, aside div {padding: 30px 30px 0 30px; } Footer {margin-top: 30px; padding: 30px 60px; background: # 80C8A0; }
У медіазапросе приберемо нижні поля і відступи, скасуємо обрізку вмісту і встановимо ширину колонок, рівну ширині блоку-контейнера.
@media (max-width: 860px) {.container {overflow: visible; } .Main-content {float: none; width: 100%; margin-bottom: 30px; padding-bottom: 0; } Aside {float: none; width: 100%; margin-bottom: 0; padding-bottom: 0; } .Main-content div, aside div {padding: 30px; } Footer {margin-top: 0; }}
3. За типом таблиці
В даному прикладі використовується особливість html-таблиць, завдяки якій всі осередки одного ряду приймають однакову висоту, рівну висоті найвищої осередку.
<Header> Шапка сторінки </ header> <div class = "container"> <div class = "main-content"> <div class = "content-wrap"> <h1> Основний контент </ h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ... </ p> </ div> <aside> <h2> Бічна колонка </ h2> <p> Nullam ac imperdiet mi. In efficitur iaculis erat id mattis ... </ p> </ aside> </ div> </ div> <footer> Підвал сторінки </ footer> body {margin: 0; background: # FAF2D6; color: # 302E2D; } Header {padding: 30px 60px; background: # 80C8A0; margin-bottom: 30px; } .Container {display: table; border-collapse: separate; border-spacing: 30px 0; } .Main-content {display: table-row; } .Content-wrap {background: # C9CCC8; } Aside {width: 300px; background: # EC5A45; } .Content-wrap, aside {display: table-cell; padding: 30px; } Footer {margin-top: 30px; padding: 30px 60px; background: # 80C8A0; }
За допомогою медіазапроса зробимо все елементи блоковими і встановимо для бічної колонки ширину 100%.
@media (max-width: 860px) {.container {padding: 0 30px; } .Container, .main-content, .content-wrap, aside {display: block; } .Content-wrap {margin-bottom: 30px; } Aside {width: 100%; box-sizing: border-box; }}
4. Flexbox
У Flexbox-моделі кожен дочірній елемент вибудовується в ряд (уздовж головної осі) колонками однакової висоти, що дорівнює висоті блоку-контейнера. Зафіксуємо ширину бічної колонки за допомогою flex-basis: 300px; і додамо їй значення flex-shrink: 0 ;, яке запобігатиме звуження.
<Header> Шапка сторінки </ header> <div class = "container"> <div class = "main-content"> <h1> Основний контент </ h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit .. . </ p> </ div> <aside> <h2> Бічна колонка </ h2> <p> Nullam ac imperdiet mi. In efficitur iaculis erat id mattis ... </ p> </ aside> </ div> <footer> Підвал сторінки </ footer> body {margin: 0; background: # FAF2D6; color: # 302E2D; } Header {padding: 30px 60px; background: # 80C8A0; } .Container {padding: 30px; } .Main-content {margin-right: 30px; background: # C9CCC8; padding: 30px; } Aside {background: # EC5A45; padding: 30px; flex-basis: 300px; flex-shrink: 0; } Footer {padding: 30px 60px; background: # 80C8A0; }
Зазначимо медіазапрос, в якому флекс-модель буде застосовуватися до елементів для ширини області перегляду від 860px.
@media (min-width: 860px) {.container {display: flex; }} @Media (max-width: 859px) {.main-content {margin: 0 0 30px 0; }}
5. Плагін matchHeight
Найпростіший спосіб, який буде працювати у всіх сучасних браузерах і IE8 +. завантажити плагін можна з сторінки розробника. Ця бібліотека дозволяє встановлювати однакову висоту як в одному ряду, так і у всіх рядах одночасно. Для всіх колонок задаємо однаковий клас (в даному прикладі item), який буде використовуватися при активації плагіна:
jQuery (document) .ready (function ($) {$ ( '. item'). matchHeight ();}); <Header> Шапка сторінки </ header> <div class = "container"> <div class = "item main"> <h1> Основний контент </ h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ... </ p> </ div> <aside class = "item"> <h2> Бічна колонка </ h2> <p> Nullam ac imperdiet mi. In efficitur iaculis erat id mattis ... </ p> </ aside> </ div> <footer> Підвал сторінки </ footer> * {box-sizing: border-box} body {margin: 0; background: # FAF2D6; color: # 302E2D; } Header {padding: 30px 60px; background: # 80C8A0; } .Container {padding: 30px; } .Container: after {content: ""; display: table; clear: both; } .Item {background: # EC5A45; padding: 30px; } .Main {float: left; width: calc (100% - 330px); } Aside {width: 300px; float: right; } Footer {padding: 30px 60px; background: # 80C8A0; }
За допомогою медіазапроса скасуємо обтікання колонок і вкажемо визначення висоти колонок залежно від висоти їх вмісту.
@media (max-width: 860px) {.item {height: auto! important; float: none; width: 100%; } .Main {margin-bottom: 30px; }}
6. jQuery функція css ()
В даному прикладі визначається висота кожної колонки і перевіряється умова, в результаті чого колонки приймають однакову (найбільшу) висоту.
<Header> Шапка сторінки </ header> <div class = "container"> <div class = "main"> <h1> Основний контент </ h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ... < / p> </ div> <aside> <h2> Бічна колонка </ h2> <p> Nullam ac imperdiet mi. In efficitur iaculis erat id mattis ... </ p> </ aside> </ div> <footer> Підвал сторінки </ footer> * {box-sizing: border-box} body {margin: 0; background: # FAF2D6; color: # 302E2D; } Header {padding: 30px 60px; background: # 80C8A0; } .Container {padding: 30px; } .Container: after {content: ""; display: table; clear: both; } .Main {float: left; width: calc (100% - 330px); background: # EC5A45; padding: 30px; } Aside {width: 300px; float: right; background: # EC5A45; padding: 30px; } Footer {padding: 30px 60px; background: # 80C8A0; }
За допомогою медіазапроса скасуємо обтікання колонок і вкажемо визначення мінімальної висоти колонок залежно від висоти їх вмісту.
@media (max-width: 860px) {.main, aside {min-height: auto! important; float: none; width: 100%; } .Main {margin-bottom: 30px; }} JQuery (document) .ready (function ($) {var content = $ ( '. Main'); var sidebar = $ ( 'aside'); var getContentHeight = content.outerHeight (); var getSidebarHeight = sidebar.outerHeight (); if (getContentHeight> getSidebarHeight) {sidebar.css ( 'min-height', getContentHeight);} if (getSidebarHeight> getContentHeight) {content.css ( 'min-height', getSidebarHeight);}});
