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

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

Min-height отменяет использование свойств height и max-height.

Свойство устанавливается в единицах измерения длины CSS (px, pt, em и т. д.) или в процентах.

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

Синтаксис

min-height: length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      min-height: 50px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства min-height</h2>
    <div>Минимальная высота текстовой области равна 50px.</div>
  </body>
</html>

В следующем примере минимальная высота элемента равна "3cm":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #ccc;  
      }
      p.example {
      min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства min-height</h2>
    <h3>Min-height: none.</h3>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. </p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>

Значения

Значение Описание
auto Устанавливает минимальную высоту. Значение по умолчанию.
length Устанавливает минимальную высоту в единицах измерения (px, pt, cm и т.д.). Значение по умолчанию - 0.
% Устанавливает минимальную высоту в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
1.0+ 12.0+ 3.0+ 1.0+ 4.0+

Практикуйте свои знания

Что такое CSS свойство 'min-height'?
Считаете ли это полезным?