Accueil    CSS    Propriété max-height
 



style css max-height  Style CSS max-height

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


La propriété max-height détermine la hauteur maximale que peut avoir un élément html lorsque la propriété height n'est pas définie. Si le contenu atteint cette limite, il s'affiche hors du conteneur.
Comme pour les propriétés min-height, min-width et max-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 max-height :




Propriété Définition Valeurs CSS
max-height Détermine la hauteur maximale 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 max-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.