CSS max-height — синтаксис и примеры
CSS-свойство max-height: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Суть темы
У темы «max-height» есть конкретная роль в области «размеры и блочная модель». Свойство max-height относится к области «размеры и блочная модель» и участвует в расчёте блочной модели с учётом режима письма, ограничений min/max и box-sizing. Для «max-height» в диалоге с возвратом фокуса после закрытия используйте отображение в режиме печати и не считайте один браузер достаточной проверкой.
Перед применением «max-height» сформулируйте ожидаемое поведение, затем проверьте вычисленное значение max-height, наследование и контекст родителя. Для «max-height» такое сравнение показывает реальную причину изменения.
Синтаксис max-height
Для демонстрации «max-height» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.demo {
max-height: min(100%, 60rem);
}Как работает max-height
Свойство max-height относится к области «размеры и блочная модель» и участвует в расчёте блочной модели с учётом режима письма, ограничений min/max и box-sizing. Для «max-height» проверьте две контрольные точки — отображение в режиме печати и изменение DOM в панели Elements: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Проверьте вычисленное значение max-height, наследование и контекст родителя; результат относится непосредственно к «max-height».
- Проверить длинный текст, пустое значение и отсутствие необязательного ресурса при разборе «max-height».
- Проверьте «max-height» в диалоге с возвратом фокуса после закрытия через отображение в режиме печати и запишите наблюдаемое изменение.
Выбор «max-height» оправдан, если задача относится к области «размеры и блочная модель», а риск «изолированная декларация max-height без связанных ограничений может дать другой результат в реальном компоненте» исключён проверкой. Для «max-height» сравнивайте не внешний вид, а результат для пользователя.
Практика с max-height
Создайте два варианта «max-height» в рабочем фрагменте интерфейса: корректный и с одной типичной ошибкой. Сравните варианты «max-height» через отображение в режиме печати и объясните различие.
Сценарий: в диалоге с возвратом фокуса после закрытия.
Ошибки при работе с max-height
Каскад
Изолированная декларация max-height без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «max-height».
Поддержка
Фиксированные размеры, которые перестают вмещать реальное содержимое при использовании «max-height».
Контекст
Подмена семантики визуально похожим div или span; для «max-height» проверьте это отдельно.
Поддержка max-height
Для «max-height» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «max-height»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о max-height
Как понять, что «max-height» выбрано правильно?
«max-height» выбрано правильно, когда оно решает задачу «задавать внешние или внутренние размеры и управлять местом для содержимого», сохраняет результат в диалоге с возвратом фокуса после закрытия и проходит предметную проверку: проверьте вычисленное значение max-height, наследование и контекст родителя.
Нужен ли запасной вариант для «max-height»?
Запасной вариант для «max-height» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «max-height» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.