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

Интерактивный пример

min-height: 150px;

min-height: 7em;

min-height: 75%;

min-height: 10px;

<section>  <div>    This is a box where you can change the minimum height. <br />If there is    more content than the minimum the box will grow to the height needed by the    content.  </div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  justify-content: center;  color: #ffffff;}

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

Синтаксис

/* Ключевые слова */min-height: max-content;min-height: min-content;min-height: fit-content;min-height: fill-available;/* <length> значения */min-height: 3.5em;/* <percentage> значения */min-height: 10%;/* Глобальные значения */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 определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путём.

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

min-height =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Примеры

table {  min-height: 75%;}form {  min-height: 0;}

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

Совместимость с браузерами

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

• height,max-height
• Блочная модель,box-sizing