Колонки однакової висоти на css

Відео: Курс CSS - Урок №33. Колонки однієї висоти

У сьогоднішній статті я хочу розповісти про новий спосіб створення колонок однакової висоти за допомогою CSS. Не потрібно більше використовувати javascript, щоб висота колонок стала однаковою для всіх. Суть даного методу полягає в використанні нового властивості CSS3, яке дає нам набагато більше можливостей, ніж просто створення колонок однакової висоти. Але в цьому уроці ми розглянемо як легко можна вирішити цю наболілу проблему.

Рекомендую також:

• Текст в декілька стовпців за допомогою CSS3
• Як створити перенесення слів CSS - абзаци з перенесенням слів CSS

Жива демонстрація:

Подивитися прімерСкачать

А ось скріншот:

Мова в даній статті піде про властивість flex. Про нього я вже писав в даній статті - Друга частина секретних властивостей CSS3.

Розмітка сторінки

HTML частина

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

Відео: Верстка каркаса (блоковий варіант)

12345678

id="Page"gt;lt;div id="Main"gt;lt;/divgt;lt;/asidegt;lt;/sectiongt;

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

Колонки однакової висоти

CSS частина

Визначимо flexbox для основного контейнери, в якому знаходяться два блоки:

123

#page {display:flex-}

Відео: верстка - практика, прийоми

Зараз ми перетворили блок з ідентифікатором page у flex-контейнер. На даний момент він займає всю ширину сторінки.

Але давайте зробимо для нього максимальну ширину 1200px і вирівняємо по центру:

1234567

#page {display:flex-/ * Вирівнювання по центру * /max-width:1200px-margin:0 auto-}

Відмінно! Зараз залишилося задати ширину для центрального блоку з основним контентом і для сайдбара:

12345678910

#main {/ * Це властивість дозволяє таким блоку розтягуватися і займати все доступне простір, не зачіпаючи сайдбар * /flex-grow:1-}aside {/ * Тут задаємо ширину сайдбара за замовчуванням і не даємо йому звужуватися * /flex-shrink:0-width:280px-}

пояснення:

• flex-grow - наскільки один окремий блок може бути більшою сусідніх елементів.
• flex-shrink - визначає можливість стискатися при необхідності.

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

12345678910

@media all and (max-width: 800px) {#page {flex-flow:column-}/ * Робимо сайдбар на всю ширину екрану * /aside {width:auto-}}

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

Також потрібно сказати про те, де працює даний метод. Так як це властивість досить нове, то і працює воно в сучасних браузерах Firefox, Chrome, Safari, Opera і IE 11.

висновок

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

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

Успіхів!

джерело: оригінал

З повагою, Юрій Німець