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

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

Властивість max-height запобігає значенню властивості height стати більшим за max-height.

Значення висоти елемента обчислюється в залежності від значень встановлених властивостей height, max-height і min-height. У таблиці нижче показано, чим керується браузер при спільному використанні зазначених стильових властивостей.

В якості значень можна використовувати одиниці довжини, проценти, а також ключові слова.

Також зверніть увагу на min-height і height.

Дані з таблиці слід розуміти так, якщо значення висоти (height) більше значення max-height, то висота елемента приймається рівною значенню max-height.

правити

Нотатка

Значення властивості max-height перевизначає властивість height.

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

none

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

автор: Svitlana

правити

length

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
max-height	1.0	1.0	1.0	7.0	7.0

Підтримка: мобільні переглядачі

Переглядач
max-height	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="lim">Висоту цього абзацу обмежено 50 пікселями, але тексту в ньому навмисно більше, ніж уміщається, тож видно, як вміст виходить за межі блока.</p>

p.lim {
    max-height: 50px;
    border: 2px solid #0172ad;
}