Свойство min-height: минимальная высота
Как задать нижнюю границу размера и сохранить возможность роста блока с текстом.
Как это работает
min-height определяет минимальную высоту элемента. В отличие от фиксированного height, она обычно позволяет блоку вырасти, когда содержимого становится больше. Это удобно для карточек, обложек и основных областей короткой страницы.
Процентная высота зависит от определённости размера содержащего блока, поэтому не всегда ведёт себя как ожидается. Для макета высотой с экран можно использовать единицы viewport с учётом мобильных панелей. Не делайте кнопку или текстовую область жёсткой по высоте, если подпись может переноситься.
Пример в интерфейсе
.card { min-height: 120px; padding: 20px; background: #eaf4ee; box-sizing: border-box; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| min-height: 120px | Нижняя граница высоты. |
| auto | Автоматический минимум в соответствующей модели. |
| min-height: 100svh | Минимум относительно малого viewport в поддерживающих браузерах. |
На что обратить внимание
Минимальная высота не защищает от обрезки, если одновременно задан max-height и скрыто переполнение. Проверяйте сочетание ограничений.
Проверьте на практике
Добавьте в карточку три абзаца вместо одного. Она должна стать выше минимального значения и сохранить внутренние отступы.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.