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