Својство 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,
које задаје минималну ширину елемента