Свойство CSS min-height

Свойство min-height задаёт минимальную высоту элемента. Элемент может стать выше этого значения, если его содержимое требует больше места, но никогда не станет ниже него. По сути, min-height устанавливает нижнюю границу высоты блока.

Это полезно, когда нужно гарантировать определённое вертикальное пространство даже при малом объёме содержимого или его отсутствии — например, для баннера-героя, карточки или подвала, который должен выглядеть весомо вне зависимости от количества текста.

Взаимодействие min-height с height и max-height

Три свойства высоты браузер разрешает совместно согласно правилам задания размеров:

Если вычисленное значение height меньше min-height, элемент принудительно расширяется до min-height (минимум имеет приоритет).
Если вычисленное значение height больше min-height, свойство min-height не оказывает никакого эффекта.
min-height всегда имеет приоритет над max-height: при конфликте двух значений элемент будет иметь высоту не менее min-height, даже если она превышает max-height.

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

Свойство принимает длину CSS (px, em, rem, vh и т. д.) или процентное значение.

Информация

Процентное значение min-height вычисляется относительно высоты родительского элемента. Если у родителя нет явно заданной высоты, процент считается равным 0 (то есть не оказывает эффекта) — это распространённый источник путаницы. Отрицательные значения не допускаются.

Начальное значение	0
Применяется к	Всем элементам, кроме незаменяемых строчных элементов, групп столбцов и столбцов таблицы.
Наследуется	Нет.
Анимируется	Да. Высота поддаётся анимации.
Версия	CSS2
DOM-синтаксис	object.style.minHeight = "100px";

Синтаксис

Синтаксис свойства CSS min-height

min-height: auto | length | percentage | calc() | initial | inherit;

Пример использования свойства min-height:

Пример свойства CSS min-height со значением в px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        min-height: 50px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <div>The text area's minimum height is defined as 50px.</div>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства min-height со значением «3cm»:

Пример свойства CSS min-height со значением в cm

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #ccc;
      }
      p.example {
        min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <h3>Min-height: auto.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Попробуйте сами »

Использование ключевых слов на основе содержимого

Помимо длин и процентов, min-height принимает ключевые слова внутреннего sizing, которые вычисляют минимум на основе самого содержимого:

min-content — наименьшая высота, которую может занять содержимое без переполнения (приблизительно высота при максимально плотном переносе строк).
max-content — высота, которую содержимое заняло бы без принудительного переноса строк.
fit-content() — ограничивает значение доступным пространством, но никогда не превышает max-content.

Эти ключевые слова удобны, когда нужно сделать блок «не ниже своего содержимого», не задавая жёстко пиксельное значение.

Распространённый сценарий: растяжение для заполнения flex-контейнера

min-height: 100vh — популярный паттерн для макетов с «прилипающим подвалом»: он делает обёртку не ниже viewport, чтобы подвал располагался внизу даже на коротких страницах, при этом страница может расти при большом количестве содержимого:

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* at least the full viewport, but can grow */
}

.page main {
  flex: 1; /* pushes the footer to the bottom */
}

Поскольку это минимум, макет никогда не обрезает длинное содержимое — блок просто растягивается за пределы 100vh. Используйте это совместно с box-sizing: border-box, чтобы отступы и границы не увеличивали вычисленную высоту неожиданным образом.

Значения

Значение	Описание	Попробовать
auto	Браузер вычисляет и выбирает min-height для данного элемента.	Попробовать »
length	Задаёт минимальную высоту в px, em, rem и т. д. Значение по умолчанию — 0.	Попробовать »
%	Задаёт минимальную высоту в процентах от высоты родителя.
calc()	Вычисляет минимальную высоту с помощью выражения.	Попробовать »
fit-content()	Задаёт минимальную высоту на основе размера содержимого, ограниченную доступным пространством.	Попробовать »
max-content	Задаёт минимальную высоту, равную внутренней максимальной высоте содержимого.	Попробовать »
min-content	Задаёт минимальную высоту, равную внутренней минимальной высоте содержимого.	Попробовать »
initial	Устанавливает свойству его значение по умолчанию.	Попробовать »
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'min-height' в CSS?

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

Связанные свойства

height — задаёт предпочтительную высоту элемента.
max-height — ограничивает максимальную высоту элемента.
min-width — горизонтальный аналог min-height.
box-sizing — управляет тем, учитываются ли отступы и границы при вычислении высоты.
overflow — определяет поведение при переполнении содержимым.