Свойство 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">
	some long text
</div>

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

Пример

За сравнение нека видим какво ще стане с блока, ако му премахнем минималната височина, а вместо нея зададем свойство height:

<div id="elem">
	some long text
</div>

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

Вижте също

свойство max-height,
което задава максимална височина на елемент
свойство max-width,
което задава максимална ширина на елемент
свойство min-width,
което задава минимална ширина на елемент