Min-height-ominaisuus

Ominaisuus min-height asettaa elementin vähimmäiskorkeuden. Ominaisuuden arvona voi olla mikä tahansa koot yksiköistä tai avainsana none, joka tarkoittaa, etteä arvoa ole asetettu.

Yleensä asetetaan elementille, jonka leveys on liukuva (korkeus on annettu prosentteina tai ei ole lainkaan asetettu, ja elementin korkeus mukautuu sen sisällön mukaan).

Jos vähimmäiskorkeus on asetettu - elementti ei voi koskaan olla tätä korkeutta pienempi. Jos tekstiä on vähemmän kuin min-height vaatisi, elementin korkeus on min-height.

Jos taas tekstiä on enemmän - elementin korkeus lasketaan tekstimäärän mukaan.

Syntaksi

valitsija {
	min-height: arvo;
}

Esimerkki

Tässä esimerkissä korkeutta ei ole asetettu lainkaan ja selain laskee sen automaattisesti tekstin määrän mukaan. Kuitenkin, koska ominaisuus min-height on asetettu, korkeus ei voi pienentyä tätä arvoa pienemmäksi, vaikka elementissä ei olisi lainkaan tekstiä:

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

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

Esimerkki

Lisätään elementtiin enemmän tekstiä - niin paljon, että elementin korkeus ylittyy. Tässä tapauksessa elementtimme vain kasvattaa korkeuttaan:

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

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

Esimerkki

Vertailun vuoksi katsotaan, mitä tapahtuu elementille, jos vähimmäiskorkeus poistetaan ja sen sijaan asetetaan ominaisuus height:

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

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

Katso myös

ominaisuus max-height,
joka asettaa elementin enimmäiskorkeuden
ominaisuus max-width,
joka asettaa elementin enimmäisleveyden
ominaisuus min-width,
joka asettaa elementin vähimmäisleveyden