A min-height tulajdonság

A min-height tulajdonság az elem minimális magasságát állítja be. A tulajdonság értéke bármely mértékegység a méretekhez vagy a none kulcsszó, ami az érték hiányát jelenti.

Általában lebegő szélességű elemre van beállítva (a magasság százalékban van megadva, vagy egyáltalán nincs megadva, és az elem magassága a tartalma alapján változik).

Ha minimális magasság van megadva - az elem nem lehet ennél a magasságnál alacsonyabb. Ha kevesebb szöveg van, mint amennyi a min-height-hez szükséges, az elem magassága a min-height lesz.

Ha viszont több a szöveg - az elem magassága a szöveg mennyiségétől függően számolódik ki.

Szintaxis

szelektor {
	min-height: érték;
}

Példa

Ebben a példában a magasság nincs egyáltalán beállítva, és a böngésző önállóan számolja ki a szöveg mennyiségétől függően. Azonban, mivel a min-height tulajdonság be van állítva, a magasság ezen értéknél nem csökken lejjebb, még akkor sem, ha egyáltalán nincs benne szöveg:

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

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

Példa

Adjunk hozzá több szöveget az elemhez - úgy, hogy magassági túlcsordulás történjen. Ebben az esetben blokkunk egyszerűen megnöveli a magasságát:

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

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

Példa

Összehasonlításképpen nézzük meg, mi lesz a blokkal, ha eltávolítjuk a minimális magasságot, és helyette a height tulajdonságot állítjuk be:

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

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

Lásd még

a max-height tulajdonság,
ami az elem maximális magasságát állítja be
a max-width tulajdonság,
ami az elem maximális szélességét állítja be
a min-width tulajdonság,
ami az elem minimális szélességét állítja be