La propriété max-height est utilisée pour définir la hauteur maximale d'un élément donné. Elle empêche la valeur de la propriété height de devenir supérieure à la valeur spécifiée par max-height (autrement dit, max-height est une borne supérieure pour height).

La valeur de max-height surcharge la valeur de height mais elle est surchargée par min-height.

Syntaxe

/* Valeur de longueur */
/* Type <length>      */
max-height: 3.5em;

/* Valeurs relatives */
/* Type <percentage> */
max-height: 10%;

/* Valeurs avec un mot-clé */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* Valeurs globales */
max-height: inherit;
max-height: initial;
max-height: unset;

Valeurs

<length>
La hauteur minimale fixée. Voir <length> pour les unités qu'on peut utiliser.
<percentage>
La hauteur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Si la hauteur de bloc englobant n'est pas définie explicitement, la valeur sera considérée comme zero. Voir la page <percentage> sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
none
Il n'y pas de limite à la hauteur que peut prendre la boîte.
max-content
La hauteur intrinsèque préférée.
min-content
La hauteur intrinsèque minimale.
fill-available
La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom : available.
fit-content
Un synonyme pour max-content.

Syntaxe formelle

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

Exemples

HTML

<div> Lorem ipsum tralala sit amet, consectetur adipisicing
  <p>
     Ut enim ad minim veniam, quis nostrud exercitation
     ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

CSS

div {
  height: 250px;
  border: solid 1px red;
}

p {
  max-height: 30%;
  border: solid 1px blue;
}

Résultat

Accessibilité

Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-height ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

 

Spécifications

Spécification État Commentaires
CSS Intrinsic & Extrinsic Sizing Module Level 3
La définition de 'max-height' dans cette spécification.
Version de travail Ajout des mots-clés max-content, min-content, fit-content et fill-available. Les deux brouillons de spécification CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ces spécifications ont été remplacées par celles-ci.
CSS Transitions
La définition de 'max-height' dans cette spécification.
Version de travail max-height peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'max-height' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenone
Applicabilitétous les éléments sauf les éléments en ligne non remplacés, les colonnes de tableaux et les groupes de colonnes
Héritéenon
PourcentagesLe pourcentage est par rapport à la hauteur de la boîte générée par le bloc contenant. Si la hauteur du bloc contenant n'est pas explicitement spécifiée (c'est-à-dire qu'elle dépend de la hauteur du contenu), et si cet élément n'est pas absolument positionné, la valeur du pourcentage est traitée comme si elle valait none.
Médiavisuel
Valeur calculéele pourcentage comme spécifié ou la longueur absolue ou le mot-clé none
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes CSS 2.1 leaves the behavior of max-height with table undefined. Firefox supports applying max-height to table elements.
IE Support complet 7Opera Support complet 7
Notes
Support complet 7
Notes
Notes CSS 2.1 leaves the behavior of max-height with table undefined. Opera supports applying max-height to table elements.
Safari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fit-content, max-content, and min-content
Expérimentale
Chrome Aucun support Non
Notes
Aucun support Non
Notes
Notes Chrome implements an earlier proposal for setting height to an intrinsic height: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for stretch or fit-content.
Edge Aucun support NonFirefox Support partiel 3
Préfixée Notes
Support partiel 3
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
IE Aucun support NonOpera Aucun support NonSafari Support complet 9
Notes
Support complet 9
Notes
Notes Safari implements an earlier proposal for setting height to an intrinsic height: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for stretch or fit-content.
WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS Support complet 9
Notes
Support complet 9
Notes
Notes Safari implements an earlier proposal for setting height to an intrinsic height: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for stretch or fit-content.
Samsung Internet Android Aucun support Non
stretch
Expérimentale
Chrome Support complet 28
Autre nom
Support complet 28
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Support complet 37
Autre nom
Support complet 37
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
Chrome Android Support complet 28
Autre nom
Support complet 28
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-fill-available
Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB, Mgjbot, Fredchat
Dernière mise à jour par : SphinxKnight,