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

Синтаксис

селектор {
	min-height: CSS единицы | проценты | none | inherit;
}

Значения

Значение Описание
CSS единицы Устанавливает минимальную высоту в заданных единицах.
Проценты Минимальная высота элемента вычисляется в зависимости от ширины родительского элемента.
none Минимальная высота не задана.
inherit Наследует значение родителя.

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

Примеры

Пример

В данном примере высота составляет процент от высота родителя - в нашем случае это body. Уменьшите окно браузера по высоте, и контейнер тоже уменьшится, чтобы подстроиться под высоту окна браузера. Однако он будет уменьшаться только до величины, определенной в min-height - это 200px. Как только контейнер достигнет этой ширины - он перестанет уменьшаться:

#elem {
	height: 80%;
	min-height: 200px;
	width: 700px;
	border: 1px solid black;
}

Посмотреть пример.

Пример

В данном примере высота не установлена вообще и будет рассчитана браузером самостоятельно в зависимости от количества текста. Однако, так как установлено свойство min-height, то div меньше этого значения не уменьшится, даже если текста в нем совсем не будет:

#elem {
	min-height: 100px;
	width: 300px;
	margin-bottom: 20px;
	border: 1px solid black;
}

Посмотреть пример.