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