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

cssszelektor {
  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:

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

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

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

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

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

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

Результат:

Lásd még