Ιδιότητα min-height

Η ιδιότητα min-height ορίζει το ελάχιστο ύψος ενός στοιχείου. Οι τιμές της ιδιότητας μπορούν να είναι οποιεσδήποτε μονάδες μεγέθους ή η λέξη-κλειδί none, που σημαίνει απουσία τιμής.

Συνήθως ορίζεται για στοιχεία με πλωτό πλάτος (το ύψος ορίζεται σε ποσοστά ή δεν ορίζεται καθόλου, και το στοιχείο επεκτείνεται σε ύψος ανάλογα με το περιεχόμενό του).

Εάν οριστεί ελάχιστο ύψος - το στοιχείο δεν μπορεί να γίνει μικρότερο από αυτό το ύψος. Εάν το κείμενο είναι λιγότερο από αυτό που απαιτείται για το min-height, το στοιχείο θα έχει ύψος ίσο με το min-height.

Εάν το κείμενο είναι περισσότερο - το ύψος του στοιχείου θα υπολογιστεί ανάλογα με την ποσότητα του κειμένου.

Σύνταξη

cssεπιλογέας {
  min-height: τιμή;
}

Παράδειγμα

Σε αυτό το παράδειγμα, το ύψος δεν έχει οριστεί καθόλου και θα υπολογιστεί αυτόματα από το πρόγραμμα περιήγησης ανάλογα με την ποσότητα του κειμένου. Ωστόσο, καθώς έχει οριστεί η ιδιότητα min-height, το ύψος δεν θα μειωθεί ποτέ κάτω από αυτήν την τιμή, ακόμα και αν δεν υπάρχει καθόλου κείμενο μέσα του:

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

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

Результат:

Παράδειγμα

Ας προσθέσουμε περισσότερο κείμενο στο στοιχείο - ώστε να υπερχειλίσει το μπλοκ σε ύψος. Σε αυτήν την περίπτωση, το μπλοκ μας απλά θα αυξήσει το ύψος του:

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

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

Результат:

Παράδειγμα

Για σύγκριση, ας δούμε τι θα συμβεί με το μπλοκ, εάν αφαιρέσουμε το ελάχιστο ύψος και αντί για αυτό ορίσουμε την ιδιότητα 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;
}

Результат:

Δείτε επίσης