CSS · справочник

Свойство height

height задаёт высоту области элемента. Жёсткое значение полезно для иконки, изображения или контролируемой панели, но опасно для блока с неизвестным текстом.

Фиксированная высота

При border-box padding и граница входят в заданный размер. Если содержимое не помещается, оно может выйти за пределы — height не увеличится автоматически.

.avatar {
  box-sizing: border-box;
  width: 96px;
  height: 96px;
}

Проценты и viewport

Процент вычисляется от явно заданной высоты родителя. Для секции на экран чаще применяют min-height: 100dvh, позволяя блоку расти с текстом.

.hero { min-height: 100dvh; }
.panel { height: 320px; overflow: auto; }

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

• Height у длинного текста.
• 100% без высоты родителя.
• Переполнение не проверено.
• 100vh на мобильном без тестирования.

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

min-height · overflow · box-sizing