max-height
Интерактивный пример
Свойство CSS max-height устанавливает максимальную высоту элемента. Оно предотвращает используемое значение свойства height от становления больше, чем значение, указанное для max-height.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
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-contentExperimental- Внутренняя предпочтительная высота.
min-contentExperimental- Внутренняя минимальная высота.
fill-availableExperimental- Высота родительского блока минус вертикальные
margin,border, иpadding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова.,available.) fit-contentExperimental- То же что и
max-content.
Формальный синтаксис
none | (en-US) <length-percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)где
<length-percentage> = <length> | (en-US) <percentage>
Примеры
table { max-height: 75%; }
form { max-height: none; }
Проблемы доступности
Убедитесь, что элементы с max-height не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста.
Спецификации
| Specification |
|---|
| CSS Box Sizing Module Level 4 # width-height-keywords |
| Начальное значение | none |
|---|---|
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок |
| Наследуется | нет |
| Проценты | Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот элемент позиционирован не абсолютно, процентное значение интерпретируется как none. |
| Обработка значения | проценты, как указаны, абсолютная длина или none |
| Animation type | длина, проценты или calc(); |
Поддержка браузерами
BCD tables only load in the browser