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

Здесь вы узнаете, как сделать колонки одинаковой высоты при помощи CSS.

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

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

Шаг 1) Добавляем HTML:

<div class="col-container">
  <div class="col">
    <h2>Колонка 1</h2>
    <p>Привет, мир</p>
  </div>

  <div class="col">
    <h2>Колонка 2</h2>
    <p>Привет, мир!</p>
    <p>Привет, мир!</p>
    <p>Привет, мир!</p>
    <p>Привет, мир!</p>
  </div>

  <div class="col">
    <h2>Колонка 3</h2>
    <p>Еще немного текста..</p>
    <p>Еще немного текста..</p>
  </div>
</div>

Шаг 2) Добавляем CSS:

.col-container {
  display: table; /* Делаем поведение контейнерного элемента как у таблицы */
  width: 100%; /* Установим ширину на весь экран */
}

.col {
  display: table-cell; /* Поведение элементов внутри контейнера как у ячеек таблицы */
}

Адаптивная равная высота

Колонки, созданные в предыдущем примере, являются адаптивными (если изменить размер окна браузера, то также изменятся ширина и высота колонок). Тем не менее, на маленьких экранах (например, на смартфонах) может потребоваться, чтобы колонки выстраивались бы вертикально (друг над другом), а не горизонтально (рядом друг с другом):

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

/* Если ширина окна браузера меньше 600px, колонки будут выводиться друг над другом */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Одинаковая высота и ширина на Flexbox

Также, чтобы создать элементы одинаковой высоты, можно использовать Flexbox:

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Примечание: Flexbox не поддерживается в Internet Explorer 10 и белее ранних версиях.