Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

min-height

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

Иногда может случиться так, что содержимое не сможет вместиться в заданные или вычисленные размеры. Тогда оно будет размещено поверх элемента и его окружения. В таких случаях поможет свойство overflow.

Во избежание «конфликта» размеров, при вычислении итоговой высоты браузеры используют определенный алгоритм расчетов:

Вычисление высоты элементов
Соотношение первичных значений	Итоговая высота
Если min-height < height	height
Если min-height < height < max-height	height
Если min-height < height > max-height	max-height
Если min-height > height	min-height
Если min-height > height > max-height	min-height
Если min-height > height < max-height	min-height

В данной таблице знак «>» означает «больше», а «<» — «меньше». А height — это высота указанная в свойстве height или (если это свойство отсутствует) предварительная высота элемента до учета минимальной и максимальной высоты.

Но с замещаемыми элементами (изображения, объекты, апплеты и т.д.) браузеры действуют по более сложному алгоритму. Дело в том, что такие элементы изначально имеют свои внутренние ширину (width) и высоту (height), поэтому и вычисляются сразу оба этих размера. Причем браузеры по возможности стараются сохранить пропорции.

Вычисление размеров замещаемых элементов
Соотношение первичных значений	Итоговая ширина	Итоговая высота
Если width > max-width, где (max-width * height/width) < min-height	max-width	min-height
Если height < max-height, где (min-height * width/height) > max-width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height > max-width * height/width)
Если (width < min-width) и (height < min-height), где (min-width/width ≤ min-height/height) и (max-width < min-height * width/height)
Если (width > max-width) и (height < min-height)
Если width < min-width, где (min-width * height/width) > max-height	min-width	max-height
Если height > max-height, где (max-height * width/height) < min-width
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width > max-height * width/height)
Если (width < min-width) и (height < min-height), где (min-width/width > min-height/height) и (max-height < min-width * height/width)
Если (width < min-width) и (height > max-height)
Если width > max-width, где (max-width * height/width) > min-height	max-width	max-width * height/width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height < max-width * height/width)	max-width	max-width * height/width
Если width < min-width, где (min-width * height/width) < max-height	min-width	min-width * height/width
Если (width < min-width) и (height < min-height), где (min-width/width > min-height/height) и (max-height > min-width * height/width)	min-width	min-width * height/width
Если height > max-height, где (max-height * width/height) > min-width	max-height * width/height	max-height
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width < max-height * width/height)	max-height * width/height	max-height
Если height < max-height, где (min-height * width/height) < max-width	min-height * width/height	min-height
Если (width < min-width) и (height < min-height), где (min-width/width ≤ min-height/height) и (max-width > min-height * width/height)	min-height * width/height	min-height

Тип свойства

Назначение: размеры.

Применяется: ко всем элементам, кроме незамещаемых встроенных (inline) элементов (<SPAN>, <B>, <EM> и т.д.), тегов <COL> и <COLGROUP> и элементов с display: table-column и table-column-group.

Наследуется: нет.

Значения

Значением свойства min-height является указание минимальной высоты элемента одним из следующих способов.

Размер — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.
Проценты — значения в процентах (%), где за 100% берется высота элемента-предка по следующему алгоритму:
1. Для непозиционируемых и относительно позиционируемых элементов (position:static или relative) минимальная высота считается относительно высоты ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то относительно тела документа (<BODY>).
2. Минимальная процентная высота самого тела документа считается относительно высоты корневого элемента (<HTML>).
3. Минимальная высота корневого элемента считается относительно высоты окна браузера.
4. Для элементов с position:fixed минимальная высота считается относительно высоты окна браузера.
5. Для элементов с position:absolute минимальная высота считается относительно высоты элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно окна браузера.
Отрицательные процентные значения (-20%) указывать нельзя. Кроме этого, если элемент-предок, от которого идет расчет, не является абсолютно позиционированным (position) и его высота не указана явно, то процентное значение не будет работать, то есть оно станет равным нулю (0).
inherit — наследует значение min-height от родительского элемента.

Процентная запись: относительно высоты элемента-предка или окна браузера.

Значение по умолчанию: 0.

Синтаксис

min-height: размер | проценты | inherit

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство min-height</title>
  <style type="text/css">
   div {
    min-height: 50px; /* минимальная высота блока DIV */
    border: 2px red solid; /* стили рамки */
   }
  </style>
 </head>
 <body>
  <div>
   Минимальная высота данного блока 50px.
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS min-height.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer			Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0	7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Нет	Частично	Да	Да	Да	Да	Да

Internet Explorer 7.0 не понимает значение inherit. Также этот браузер может неправильно вычислять размер замещаемых элементов, например изображений, когда min-height указывается совместно с width.