Accueil    CSS    Propriété min-height
 



style css min-height  Style CSS min-height

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété min-height détermine la hauteur minimale que peut avoir un élément html lorsque la propriété height n'est pas définie. Tant que le contenu n'atteint pas cette limite l'élément conservera cette heuteur minimale.
Comme pour les propriétés max-height, max-width et min-width, elle n'est pas applicable pour les éléments dont la propriété display est inline, table-row ou table-row-group (de nombreux éléments html sont inline par défaut comme les balises span ou label). Pour contourner ce problème il est possible d'employer la valorisation "display:inline-block".

La hauteur peut varier significativement suivant le contenu de l'élément et pour éviter de définir une valeur fixe il est possible d'employer les styles css min-height et max-height pour fixer une fourchette de valeurs. La propriété overflow permet également de modifier le comportement du conteneur et par exemple d'afficher des barres de scroll lorsque le texte atteint une hauteur spécifiée.

La hauteur width d'un élément n'inclue pas les tailles des propriétés border, padding et margin. L'article relatif au modèle des boites permet de bien comprendre les différentes dispositions s'appliquant autour d'un élément.



Propriétés pour le style min-height :




Propriété Définition Valeurs CSS
min-height Détermine la hauteur minimale que peut prendre un élément html (non applicable au style display valant inline, table-row ou table-row-group) none
valeur (px, em ...)
%
inherit
CSS 2


Exemple d'utilisation du style css min-height :




Affichage d'un élément div avec hauteurs minimales et maximales spécifiques :

<div style="padding:5px; border:solid 1px black; width:400px; max-height:100px;">
   Elément avec une hauteur maximale de 100 pixels.
   <br />La taille du conteneur s'adapte à son contenu s'il n'y a pas de hauteur minimale.
</div>

<div style="padding:5px; border:solid 1px black; width:400px; min-height:70px; max-height:100px;">
   Elément avec une hauteur minimale de 70 pixels et maximale de 100 pixels.
   <br />La taille du conteneur prend la hauteur minimale si le contenu n'atteind pas la taille minimale.
</div>

<div style="padding:5px; border:solid 1px black; width:400px; max-height:100px;">
   Elément avec une hauteur maximale de 100 pixels.
   <br />
   <br />Le contenu dépasse cette fois la hauteur maximale fixée
   <br />
   <br />
   <br />Le texte sort de la limite du conteneur
   <br />lorsqu'il atteint la limite
   <br />Limite fixée à 100px.
</div>


Affichage d'un élément div avec hauteurs minimales et maximales spécifiques :

Elément avec une hauteur maximale de 100 pixels.
La taille du conteneur s'adapte à son contenu s'il n'y a pas de hauteur minimale.

Elément avec une hauteur minimale de 70 pixels et maximale de 100 pixels.
La taille du conteneur prend la hauteur minimale si le contenu n'atteind pas la taille minimale.

Elément avec une hauteur maximale de 100 pixels.


Le contenu dépasse cette fois la hauteur maximale fixée



Le texte sort de la limite du conteneur
lorsqu'il atteint la limite
Limite fixée à 100px.