X
Юрий Немец

Колонки одинаковой высоты на CSS

В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.

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

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

Посмотреть примерСкачать

А вот скриншот:

Речь в данной статьей пойдет о свойстве flex. О нём я уже писал в данной статье — Вторая часть секретных свойств CSS3.

Разметка страницы

HTML часть

Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:

HTML КОД
1
2
3
4
5
6
7
8

<section id="page">
    <div id="main">
        <!-- Часть с контентом -->
    </div>
    <aside>
        <!-- Сайдбар -->
    </aside>
</section>

То есть нам необходимо сделать так, чтобы блок <div> с идентификатором main и блок <aside> имели одинаковую высоту, независимо от содержания внутри любого. Но это еще не всё что нужно сделать. На маленьких экранах боковая сторона должна размещаться под блоком с основным содержимым. Это сделаем для удобства просмотра на мобильных устройствах.

Колонки одинаковой высоты

CSS часть

Определим flexbox для основного контейнера, в котором находятся два блока:

CSS КОД
1
2
3

#page {
    display:flex;
}

Сейчас мы преобразовали блок с идентификатором page во flex-контейнер. На данный момент он занимает всю ширину страницы.

Но давайте сделаем для него максимальную ширину 1200px и выровняем по центру:

CSS КОД
1
2
3
4
5
6
7

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

Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара:

CSS КОД
1
2
3
4
5
6
7
8
9
10

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

Пояснения:

  • flex-grow — на сколько один отдельный блок может быть больше соседних элементов.
  • flex-shrink — определяет возможность сжиматься при необходимости.

Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах:

CSS КОД
1
2
3
4
5
6
7
8
9
10

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

Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи.

Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11.

Вывод

Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое.

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Категории: CSS3