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.
| Нотатка: | Значення властивості |
| Нотатка: | Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості |
Синтаксис
max-height: none|length|initial|inherit;Властивість max-height може отримувати 4 значення:
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.maxHeight="100px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| max-height | 1.0 |
7.0 |
1.0 |
1.0 |
7.0 |
| Переглядач | |||
|---|---|---|---|
| max-height | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Ми встановили максимальну висоту для елемента <p>
p {
max-height: 50px;
}