min-height

Свойство 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 для AndroidFirefox для 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 Полная поддержка 1.3WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания CSS 2.1 leaves the behavior of min-height with table undefined. Firefox supports applying min-height to table elements.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.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 Полная поддержка 37Chrome Android Полная поддержка 25Firefox Android Нет поддержки 16 — 22
Замечания
Нет поддержки 16 — 22
Замечания
Замечания Firefox 18 and later used auto as the initial value for min-height.
Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android ?
fit-content
Экспериментальная
Chrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Полная поддержка 3
С префиксом Замечания
Полная поддержка 3
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 6.1
С префиксом
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Firefox Android Полная поддержка 4
С префиксом Замечания
Полная поддержка 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
Opera Android Полная поддержка 43Safari iOS Полная поддержка 6.1
С префиксом
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Samsung Internet Android Полная поддержка 5.0
max-contentChrome Полная поддержка 46Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 5.0
min-contentChrome Полная поддержка 46Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом
С префиксом Требует вендорный префикс: -webkit-
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 Полная поддержка 4.4
Альтернативное имя
Полная поддержка 4.4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 28
Альтернативное имя
Полная поддержка 28
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Firefox Android Нет поддержки НетOpera Android Полная поддержка Да
Альтернативное имя
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari iOS Полная поддержка 9
Альтернативное имя
Полная поддержка 9
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Samsung Internet Android Полная поддержка Да
Альтернативное имя
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available

Легенда

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

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