CSS · размеры

Свойство min-height

min-height задаёт нижнюю границу высоты, но позволяет блоку расти вместе с содержимым. Это безопаснее жёсткого height для карточек и текстовых секций.

Минимум вместо фиксации

Если текст станет длиннее, элемент с height может переполниться. При min-height исходная высота сохраняется для короткого текста, а длинный помещается за счёт роста блока.

.card {
  min-height: 220px;
  padding: 24px;
}

Секция на высоту экрана

Для первого экрана часто используют динамические единицы viewport. 100dvh учитывает изменение интерфейса мобильного браузера точнее, чем старое 100vh.

.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

Проценты требуют основы

Процентная высота вычисляется только при известной высоте родителя. Если она равна auto, ожидаемый результат может не появиться. В таких случаях чаще подходят px, rem или viewport-единицы.

Частые ошибки

• Жёсткий height у блока с неизвестным текстом.
• min-height: 100% без высоты родителя.
• Игнорировать padding при расчёте.
• Ожидать, что min-height ограничит максимальный рост.

Связанные темы

width · box-sizing · Flexbox