css властивість min-height
Властивість min-height використовується, щоб встановити мінімальну висоту елемента.
Ця властивість не дозволяє значенню властивості height стати меншим за min-height.
Значення висоти елемента буде обчислюватися в залежності від встановлених значень властивостей height, max-height і min-height.
Як браузер розраховує висоту елемента.
| Значенння властивості | Висота | ||||
|---|---|---|---|---|---|
| min-height | < | height | < | max-height | height |
| min-height | > | height | > | max-height | min-height |
| min-height | > | height | < | max-height | min-height |
| min-height | < | height | height | ||
| min-height | > | height | min-height | ||
| min-height | > | max-height | min-height | ||
| min-height | < | max-height | max-height |
Дані з таблиці слід розуміти так. Якщо значення висоти (height) менше за значення min-height, то висота елемента вважається рівною min-height.
Формальний синтаксис
min-height: length | auto | max-content | min-content | fit-content | fill-available
auto
Мінімальна висота за замовчуванням для елементів flex, що забезпечує більше розумного дефолту, ніж 0 для інших макетів.
max-content
Внутрішня бажана висота.
min-content
Внутріщня мінімальна висота.
fill-available
Висота блоку контенту мінус вертикальний margin, border, та padding.
fit-content
Згідно з кодом CSS3, це синонім min-content. CSS3 визначає більш складний алгоритм, але браузер не реалізує його, навіть експериментально.
Ключові слова практично не підтримуються браузерами.
/* <length> value */
min-height: 3.5em;
min-height: 10%;
/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;
/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;
| Нотатка: | Значення властивості |
| Нотатка: | Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості |
Синтаксис
min-height: length|initial|inherit;Властивість min-height може отримувати 3 значення:
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.minHeight="400px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| min-height | 1.0 |
7.0 |
1.0 |
1.0 |
7.0 |
| Переглядач | |||
|---|---|---|---|
| min-height | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Встанолюємо мінімальну висоту для елемента
p {
min-height: 100px;
}