min-height
Минимальная высота: элемент не ниже этой высоты, но может расти.
Синтаксис
min-height: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| px | length | Минимум в пикселях. |
| vh | dvh | length | Доля высоты окна; `min-height: 100dvh` заполняет экран. |
Примеры
Карточки одинаковой минимальной высоты:
<style>
.card { min-height: 80px; padding: 8px; background: honeydew; margin-bottom: 6px; }
</style>
<div class="card">Short text</div>
<div class="card">A longer text makes the card taller than its minimum if needed — it is never cut off, because min-height only sets the lower limit and the block keeps growing with its content.</div>Примечания
min-height: 100dvh у обёртки страницы вместе с flexbox прижимает подвал к низу экрана, когда содержимого мало. dvh учитывает меняющуюся панель мобильного браузера, а vh — нет.
См. также
- max-height — Максимальная высота: элемент растёт вместе с содержимым только до этого предела.
- height — Высота элемента.
- flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
Вопросы и ответы по теме
В учебнике
- Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.