max-height
Свойство CSS max-height
устанавливает максимальную высоту элемента. Оно предотвращает используемое значение свойства height
от становления больше, чем значение, указанное для max-height
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Исходный код этого интерактивного примера хранится в репозитории 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-content
- Внутренняя предпочтительная высота.
min-content
- Внутренняя минимальная высота.
fill-available
- Высота родительского блока минус вертикальные
margin
,border
, иpadding
. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова.,available
.) fit-content
- То же что и
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
не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Box 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(); |
Поддержка браузерами
BCD tables only load in the browser