css властивість max-height


CSS властивість max-height використовується, щоб встановити максимальну висоту елемента.

Властивість `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 перевизначає властивість height.

Нотатка:

Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості box-sizing). Це не стосується до значень у одиницях довжини або процентах.

Синтаксис

max-height: none|length|initial|inherit;

Властивість max-height може отримувати 4 значення:

none

Скасовує максимальну висоту

length

В якості значення приймаються пікселі (px), відсотки (%) і інші одиниці виміру прийняті в CSS. Від`ємні значення не допускаються.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: 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;


}

Додаткові посилання