Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

min-height

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

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

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

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

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

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

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

Тип свойства

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

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

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

Значения

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

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

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

Синтаксис

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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 min-height

Версии CSS

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

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.07.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетЧастичноДаДаДаДаДа

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