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