Propriété min-height

La propriété min-height définit la hauteur minimale d'un élément. Les valeurs de la propriété peuvent être n'importe quelle unité de taille ou le mot-clé none, qui signifie l'absence de valeur.

Elle est généralement définie pour un élément avec une largeur fluide (la hauteur est définie en pourcentages ou n'est pas définie du tout, et la hauteur de l'élément est déterminée par son contenu).

Si une hauteur minimale est définie, l'élément ne pourra pas devenir plus petit que cette hauteur. S'il y a moins de texte que nécessaire pour atteindre la min-height, l'élément aura la hauteur de min-height.

S'il y a plus de texte, la hauteur de l'élément sera calculée en fonction de la quantité de texte.

Syntaxe

sélecteur {
	min-height: valeur;
}

Exemple

Dans cet exemple, la hauteur n'est pas du tout définie et sera calculée automatiquement par le navigateur en fonction de la quantité de texte. Cependant, comme la propriété min-height est définie, la hauteur ne diminuera pas en dessous de cette valeur, même s'il n'y a pas de texte à l'intérieur :

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

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

Exemple

Ajoutons plus de texte à l'élément - de sorte que le bloc déborde en hauteur. Dans ce cas, notre bloc augmentera simplement sa hauteur :

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

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

Exemple

Pour comparaison, voyons ce qui arrive au bloc si on lui retire la hauteur minimale et qu'on lui définit à la place la propriété height :

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

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

Voir aussi

la propriété max-height,
qui définit la hauteur maximale d'un élément
la propriété max-width,
qui définit la largeur maximale d'un élément
la propriété min-width,
qui définit la largeur minimale d'un élément