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


В этом уроке я приведу различные способы, показывающие как можно сделать колонки одинаковой высоты. Все варианты будут разобраны для двухколоночного макета страницы, но они также будут работать для трёх и более колонок (с небольшой модификацией). Часть примеров реализуется на чистом CSS, другие используют JavaScript. Вы можете посмотреть каждый пример в редакторе Codepen, кликнув по картинке.

1. Псевдоэлемент и абсолютное позиционирование

Суть данного способа следующая: с помощью псевдокласса :after каждой колонке добавляется блок, который залит соответствующим цветом и имеет высоту, равную 100% высоте блока-контейнера. Для блока-контейнера задано свойство overflow: hidden;, которое и обрезает лишнюю высоту.

В медиазапросе, например, для максимальной ширины 860px отменим обрезку содержимого контейнера, обтекание для колонок и скроем содержимое, добавленное с помощью псевдокласса. Ширину колонок сделаем равную ширине блока-контейнера.

2. Внутренние и внешние отступы

Для каждой колонки устанавливаем нижнее поле padding с большим значением. В этом случае фон колонки будет распространяться на всю высоту поля. Далее задаём отрицательное нижнее поле с таким же значением. С его помощью мы уменьшаем высоту колонки до её фактических размеров, не затрагивая фоновую заливку. Свойство overflow: hidden;, заданное для блока-контейнера, обрезает высоту каждой колонки, ориентируясь на самую высокую.

В медиазапросе уберём нижние поля и отступы, отменим обрезку содержимого и установим ширину колонок, равную ширине блока-контейнера.

3. По типу таблицы

В данном примере используется особенность html-таблиц, благодаря которой все ячейки одного ряда принимают одинаковую высоту, равную высоте самой высокой ячейки.

С помощью медиазапроса сделаем все элементы блочными и установим для боковой колонки ширину 100%.

4. Flexbox

В Flexbox-модели каждый дочерний элемент выстраивается в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера. Зафиксируем ширину боковой колонки с помощью flex-basis: 300px; и добавим ей значение flex-shrink: 0;, которое предотвратит сужение.

Укажем медиазапрос, в котором флекс-модель будет применяться к элементам для ширины области просмотра от 860px.

5. Плагин matchHeight

Самый простой способ, который будет работать во всех современных браузерах и IE8+. Скачать плагин можно со страницы разработчика. Эта библиотека позволяет устанавливать одинаковую высоту как в одном ряду, так и во всех рядах одновременно. Для всех колонок задаём одинаковый класс (в данном примере item), который будет использоваться при активации плагина:

С помощью медиазапроса отменим обтекание колонок и укажем определение высоты колонок в зависимости от высоты их содержимого.

6. jQuery функция css()

В данном примере определяется высота каждой колонки и проверяется условие, в результате чего колонки принимают одинаковую (наибольшую) высоту.

С помощью медиазапроса отменим обтекание колонок и укажем определение минимальной высоты колонок в зависимости от высоты их содержимого.

  • Создание Сайтов

    Это очень полезная статья. Извечная проблема колонок.

  • Evgeniy Belousov

    Полезная статья, отдельное спасибо за плагин «matchHeight». Пользовался раньше «equalheights», тоже неплохой, но у этого больше возможностей

    • Пожалуйста. Согласна, плагин matchHeight более удачный. В своё время, когда нужно было решить подобную проблему, equalheights сразу не впечатлил.

  • fgeniy

    метод jQuery самый практичный, как по мне. Спасибо

    • Пожалуйста

      • fgeniy

        но похоже, что если колонок будет больше чем 2, то возникает проблема..

        • в общем статья писалась под две колонки, поддержка большего количества есть у плагина matchHeight, остальные варианты пока не тестировала.

  • Антон Дьяков

    Достаточно родительскому диву задать display:flex и можно напихивать его дивами, все они будут одинаковы по высоте

    • В этом уроке приведены разные варианты и флексбокс, который не работает в старых браузерах, среди них тоже присутствует.