Хосияти 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,
ки бараши ҳадди ақали элементро муқаррар мекунад