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;
- Нотатка
-
Значення властивості
автор: Svitlanamin-heightперевизначає властивостіmax-heightтаheight. - Нотатка
-
Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості
автор: Svitlanabox-sizing). Це не стосується до значень у одиницях довжини або процентах.
Синтаксис
min-height: length|initial|inherit;Властивість min-height може отримувати 3 значень:
-
length -
В якості значення
автор: Svitlanalengthприймаються пікселі (px), відсотки (%) і інші одиниці виміру, прийняті в CSS. Від`ємні значення не допускаються. -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.minHeight="400px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3 | 1.3 | 4 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Тексту на один рядок, але блок не може бути нижчим за 100 пікселів — рамка показує справжню висоту.
HTML
<p class="min">Короткий текст, а висота — щонайменше 100px.</p>CSS
p.min {
min-height: 100px;
border: 2px solid #0172ad;
}Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Коментарі
Коментарів ще немає — будьте першим!