--- title: max-height slug: Web/CSS/max-height translation_of: Web/CSS/max-height ---
{{CSSRef}}

Свойство CSS max-height устанавливает максимальную высоту элемента. Оно предотвращает используемое значение свойства {{ Cssxref("height") }} от становления больше, чем значение, указанное для max-height.

{{EmbedInteractiveExample("pages/css/max-height.html")}}

{{ Cssxref("max-height") }} перекрывает {{cssxref("height")}}, но {{ Cssxref("min-height") }} перекрывает {{ Cssxref("max-height") }}.

Синтаксис

/* <length> значения */
max-height: 3.5em;

/* <percentage> значения */
max-height: 75%;

/* Значения-ключевые слова */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* Глобальные значения */
max-height: inherit;
max-height: initial;
max-height: unset;

Значения

{{cssxref("<length>")}}
Максимальная высота выражается как {{cssxref("<length>")}}.
{{cssxref("<percentage>")}}
Максимальная высота выражается как {{cssxref("<percentage>")}} от высоты родительского блока.

Значения-ключевые слова

none
Высота не имеет максимального значения.
max-content{{experimental_inline()}}
Внутренняя предпочтительная высота.
min-content{{experimental_inline()}}
Внутренняя минимальная высота.
fill-available{{experimental_inline()}}
Высота родительского блока минус вертикальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
fit-content{{experimental_inline()}}
То же что и max-content.

Формальный синтаксис

{{csssyntax}}

Примеры

table { max-height: 75%; }

form { max-height: none; }

Проблемы доступности

Убедитесь, что элементы с max-height не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. 

Спецификации

Спецификация Статус Комментарий
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height') }} {{ Spec2('CSS3 Sizing') }} Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }} {{ Spec2('CSS3 Transitions') }} Определяет max-height как анимируемое.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }} {{ Spec2('CSS2.1') }} Первоначальное определение.

{{cssinfo}}

Поддержка браузерами

{{Compat("css.properties.max-height")}}

Смотрите также