Ιδιότητα min-height

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

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

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

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

Σύνταξη

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

Για σύγκριση, ας δούμε τι θα συμβεί με το μπλοκ, εάν αφαιρέσουμε το ελάχιστο ύψος και αντί για αυτό ορίσουμε την ιδιότητα height:

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

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

Δείτε επίσης

η ιδιότητα max-height,
που ορίζει το μέγιστο ύψος ενός στοιχείου
η ιδιότητα max-width,
που ορίζει το μέγιστο πλάτος ενός στοιχείου
η ιδιότητα min-width,
που ορίζει το ελάχιστο πλάτος ενός στοιχείου