Свойство min-height

Свойство min-height устанавливает минимальную высоту элемента. Значением свойства служат любые единицы для размеров либо ключевое слово none, означающее отсутствие значения.

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

Если задана минимальная высота - то меньше этой высоты элемент не сможет стать. Если текста меньше, чем нужно для min-height, элемент будет иметь высоту min-height.

Если же текста больше - высота элемента вычислится в зависимости от количества текста.

Синтаксис

селектор {
	min-height: значение;
}

Пример

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

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

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

Пример

Давайте добавим элементу больше текста - так, чтобы произошло переполнение блока по высоте. В этом случае наш блок просто увеличит свою высоту:

<div id="elem">
	какой-то длинный текст...
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Пример

Для сравнения давайте посмотрим, что будет с блоком, если убрать ему минимальную высоту, а вместо нее задать свойство height:

<div id="elem">
	какой-то длинный текст...
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}

Смотрите также

свойство max-height,
которое задает максимальную высоту элемента
свойство max-width,
которое задает максимальную ширину элемента
свойство min-width,
которое задает минимальную ширину элемента