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	Значение элемента наследуется от родительского элемента.