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

max-height перекрывает height, но min-height перекрывает 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;

Значения

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

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

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

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

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

Примеры

table { max-height: 75%; }

form { max-height: none; }

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

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

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

Спецификация Статус Комментарий
CSS Intrinsic & Extrinsic Sizing Module Level 3
Определение 'max-height' в этой спецификации.
Рабочий черновик Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
CSS Transitions
Определение 'max-height' в этой спецификации.
Рабочий черновик Определяет max-height как анимируемое.
CSS Level 2 (Revision 1)
Определение 'max-height' в этой спецификации.
Рекомендация Первоначальное определение.

Начальное значениеnone
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок
Наследуетсянет
ПроцентыПроцент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот элемент позиционирован не абсолютно, процентное значение интерпретируется как none.
Отображениевизуальный
Обработка значенияпроценты, как указаны, абсолютная длина или none
Animation typeдлина, проценты или calc();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания CSS 2.1 leaves the behavior of max-height with table undefined. Firefox supports applying max-height to table elements.
IE Полная поддержка 7Opera Полная поддержка 7
Замечания
Полная поддержка 7
Замечания
Замечания CSS 2.1 leaves the behavior of max-height with table undefined. Opera supports applying max-height to table elements.
Safari Полная поддержка 1WebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fit-content, max-content, and min-content
Экспериментальная
Chrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Chrome implements an earlier proposal for setting height to an intrinsic height: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for stretch or fit-content.
Edge Нет поддержки НетFirefox Частичная поддержка 3
С префиксом Замечания
Частичная поддержка 3
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания Safari implements an earlier proposal for setting height to an intrinsic height: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for stretch or fit-content.
WebView Android ? Chrome Android ? Edge Mobile Нет поддержки НетFirefox Android ? Opera Android ? Safari iOS Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания Safari implements an earlier proposal for setting height to an intrinsic height: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for stretch or fit-content.
Samsung Internet Android Нет поддержки Нет
stretch
Экспериментальная
Chrome Полная поддержка 28
Альтернативное имя
Полная поддержка 28
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Полная поддержка 37
Альтернативное имя
Полная поддержка 37
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 28
Альтернативное имя
Полная поддержка 28
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Mobile Нет поддержки НетFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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

Метки документа и участники

Внесли вклад в эту страницу: Kikubaaqudgha
Обновлялась последний раз: Kikubaaqudgha,