min-height

Internet Explorer			Chrome			Opera			Safari			Firefox
6.0	7.0	8.0	2.0	3.0	4.0	9.2	9.6	10	2.0	3.1	4.0	2.0	3.0	3.6

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Применяется	Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Табл. 1. Высота элемента
Значения свойств					Высота
min-height	<	height	<	max-height	height
min-height	>	height	>	max-height	min-height
min-height	>	height	<	max-height	min-height
min-height	<	height			height
min-height	>	height			min-height
min-height	>			max-height	min-height
min-height	<			max-height	max-height

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.

Синтаксис

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

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

Пример

HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0

<!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>min-height </title>
  <style type="text/css">
   #bottom {
    background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Параметры фона */ 
    min-height: 80px; /* Минимальная высота */ 
    color: #E4BC96; /* Цвет текста */ 
    padding: 5px 5px 5px 140px; /* Поля вокруг текста */ 
   }
   #bottom p { margin: 5px 0; }
   #bottom a {
    color: #FFFDE0;
   }
  </style>
 </head>
 <body>

  <div id="bottom">
    <p>Сайт Cloverfield</p>
    <p><a href="/info/">Информация о сайте</a> <a href="/author/">Об авторе</a></p>
  </div>

 </body>
</html>

В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Высота блока, заданная с помощью min-height

Объектная модель

[window.]document.getElementById("elementID").style.minHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.