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

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

Свойство min-height взаимодействует со свойствами height и max-height в соответствии с правилами масштабирования CSS.

В качестве значения свойства может выступать длина в CSS (px, pt, em и т. д.) или процент.

INFO

Отрицательные значения не принимаются.

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

Синтаксис

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

css

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

Пример свойства min-height:

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

html

<!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>

Try it Yourself »

Результат

Свойство min-height

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

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

html

<!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>

Try it Yourself »

Значения

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

Практика

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

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

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

Синтаксис ​

Пример свойства min-height: ​

Результат ​

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

Значения ​