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