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