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

cssvalitsija {
  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ä:

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

css#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:

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

css#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:

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

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

Результат:

Katso myös