min-height

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
7.0	8.0+	1.0+	4.0+	2.0+	1.0+	2.1+	2.0+

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

Значение по умолчанию	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

Наследует значение родителя.

Пример

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> min-height </title>

<style>

#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="techinfo.html">Информация о сайте</a>

<a href="activity.html">Об авторе</a></p>

</div>

</body>

</html>

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

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

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

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

Браузеры

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

Категория: Размер