Свойство CSS min-height устанавливает минимальную высоту элемента. Оно предотвращает используемое значение свойства height от становления меньше, чем значение, указанное для min-height.

Высота элемента принимает значение min-height всякий раз, когда min-height больше чем max-height или height.

Синтаксис

/* <length> значения */
min-height: 3.5em;

/* <percentage> значения */
min-height: 10%;

/* Значения-ключевые слова */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* Глобальные значения */
min-height: inherit;
min-height: initial;
min-height: unset;

Значения

<length>
Минимальная высота выражается как <length>. Отрицательные значения делают свойство недействительным.
<percentage>
Минимальная высота выражается как <percentage> от высоты родительского блока. Отрицательные значения делают свойство недействительным.

Значения-ключевые слова

auto
Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content
Внутренняя предпочтительная высота.
min-content
Внутренняя минимальная высота.
fill-available
Высота родительского блока минус вертикальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
fit-content
Согласно CSS3 Box, это синоним min-content. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.

Формальный синтаксис

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

Примеры

table { min-height: 75%; }

form { min-height: 0; }

Спецификации

Спецификация Статус Комментарий
CSS Intrinsic & Extrinsic Sizing Module Level 3
Определение 'min-height' в этой спецификации.
Рабочий черновик Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
CSS Flexible Box Layout Module
Определение 'min-height' в этой спецификации.
Кандидат в рекомендации Добавляет ключевое слово auto и использует его как первоначальное значение.
CSS Transitions
Определение 'min-height' в этой спецификации.
Рабочий черновик Определяет min-height как анимируемое.
CSS Level 2 (Revision 1)
Определение 'min-height' в этой спецификации.
Рекомендация Первоначальное определение.

Начальное значениеauto
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок
Наследуетсянет
ПроцентыПроцент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, процентное значение интерпретируется как 0.
Отображениевизуальный
Обработка значенияпроцент, как указан, или аблосютная длина
Animation typeдлина, проценты или calc();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
min-heightChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3
Замечания
Полная поддержка 3
Замечания
Замечания CSS 2.1 leaves the behavior of min-height with table undefined. Firefox supports applying min-height to table elements.
IE Полная поддержка 7
Замечания
Полная поддержка 7
Замечания
Замечания In Internet Explorer 10 and 11, a min-height declaration on a column-direction flex container doesn't apply to the container's flex items. See Flexbug #3 for more info.
Opera Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания CSS 2.1 leaves the behavior of min-height with table undefined. Opera supports applying min-height to table elements.
Safari Полная поддержка 1WebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android ? Opera Android ? Safari iOS Полная поддержка 9Samsung Internet Android ?
max-contentChrome Полная поддержка 46Edge Нет поддержки НетFirefox Полная поддержка 66IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка ДаWebView Android Полная поддержка 46Chrome Android Полная поддержка 46Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 66Opera Android Полная поддержка 44Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 5.0
min-contentChrome Полная поддержка 46Edge Нет поддержки НетFirefox Полная поддержка 66IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка ДаWebView Android Полная поддержка 46Chrome Android Полная поддержка 46Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 66Opera Android Полная поддержка 44Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 5.0
stretch
Экспериментальная
Chrome Полная поддержка 28
Альтернативное имя
Полная поддержка 28
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка Да
Альтернативное имя
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari Полная поддержка 9
Альтернативное имя
Полная поддержка 9
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
WebView Android Полная поддержка 37
Альтернативное имя
Полная поддержка 37
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 28
Альтернативное имя
Полная поддержка 28
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Mobile ? Firefox Android ? Opera Android Полная поддержка Да
Альтернативное имя
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari iOS ? Samsung Internet Android Полная поддержка Да
Альтернативное имя
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
fit-content
Экспериментальная
Chrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 6.1
С префиксом
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Edge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Полная поддержка 44Safari iOS ? Samsung Internet Android Полная поддержка 5.0
autoChrome Полная поддержка 21Edge ? Firefox Нет поддержки 16 — 22
Замечания
Нет поддержки 16 — 22
Замечания
Замечания Firefox 18 and later used auto as the initial value for min-height.
IE Нет поддержки НетOpera Полная поддержка 12.1Safari Нет поддержки НетWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Kikubaaqudgha
Обновлялась последний раз: mdnwebdocs-bot,