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 Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя предпочтительная высота.
min-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя минимальная высота.
fill-available Это экспериментальное API, которое не должно использоваться в рабочем коде.
Высота родительского блока минус вертикальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
fit-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Согласно CSS3 Box, это синоним min-content. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путём.

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

auto | (en-US) <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)

где
<length-percentage> = <length> | (en-US) <percentage>

Примеры

table { min-height: 75%; }

form { min-height: 0; }

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

Спецификация Статус Комментарий
CSS Box 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();

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

BCD tables only load in the browser

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