Как создать: блоки одинаковой высоты

Узнайте, как использовать CSS для создания блоков одинаковой высоты.

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

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

Пробуйте сами

Шаг 1 - Добавьте HTML:

<div class="col-container">
  <div class="col">
    <h2>Столбец 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>Столбец 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>Столбец 3</h2>
    <p>Другой текст...</p>
    <p>Другой текст...</p>
  </div>
</div>

第二步 - Добавьте 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;
}

Пробуйте сами

Внимание:Internet Explorer 10 и более ранние версии не поддерживают Flexbox.

Связанные страницы

Учебник:CSS Flexbox