`Height` - Propriété CSS

Cette page concerne aussi les propriétés physiques :

- width

Définit la largeur de l'élément.

Et les propriétés logiques :

- inline-size

Définit la dimension de l'élément dans la direction des lignes. Pour les langues latines cette propriété est équivalente à width.

- block-size

Définit la dimension d'un l'élément suivant la direction des blocs. Pour les langues latines, cette propriété logique est équivalente à height.

height

width

inline-size

block-size

Résumé des caractéristiques de la propriété `height`

Description rapide

Définit la hauteur de l'élément.

Statut

Standard

S'applique à

Tous les élements du type bloc.

Utilisable sur

HTML, SVG

Valeurs prédéfinies

auto | min-content | max-content | fit-content

Pourcentages

Calculés par rapport à la hauteur de l'élément parent si celle-ci est fixée.

Valeur initiale

auto

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété height passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Dimensionnement des blocs

Références (W3C)

🡇

🡅

CSS Box Sizing Module Level 4

Statut du document: WD (document de travail)

CSS Box Sizing Module Level 3

Statut du document: WD (document de travail)

CSS Logical Properties and Values Level 1

Statut du document: WD (document de travail)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma syntaxique de `height`.

Schéma syntaxique de la propriété height.

Sur les schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

length est une valeur numérique suivie d'une des unités de dimension.
% est un pourcentage calculé par rapport à la largeur de l'élément parent.

Description de la propriété physique `height`.

Comme on pouvait s'en douter, la propriété height définit la hauteur de l'élément.

Cette propriété est dite "physique" car elles agit toujours sur la hauteur de l'élément quelque soit le mode d'écriture du texte. Le mode d'écriture dépend de la langue : les langues CJK par exemple s'écrivent du haut vers le bas.

Mode de calcul des dimensions.

Attention ! La propriété box-sizing modifie la façon de calculer les dimensions d'un élément :

box-sizing:content-box;
(Valeur par défaut)
La propriété height définit la hauteur du contenu de l'élément (marges intérieures exclues).

box-sizing:border-box;
La propriété height définit la hauteur de la bordure de l'élément (épaisseur de la bordure et marges intérieures incluses).

Voyez également les propriétés min-height et max-height qui peuvent imposer des contraintes sur la hauteur de l'élément. Et également la propriété width pour définir la largeur.

Description des propriétés logiques `inline-size` et `block-size`.

S'il est nécessaire d'intégrer des langues non latines, avec un mode d'écriture différent (de haut en bas par exemple), deux propriétés dites logiques ont été définies :

inline-size :

Définit la dimension de l'élément dans la direction des lignes. Pour les langues latines cette propriété est équivalente à width.

block-size :

Définit la dimension d'un l'élément suivant la direction des blocs. Pour les langues latines, cette propriété logique est équivalente à height.

⮜───── width ─────⮞

La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.

⮜──── height ────⮞

Si vous souhaitez plus d'explications sur la gestion des modes d'écriture en fonction de la langue, reportez-vous au tutoriel concernant les modes d'écriture.

Valeurs pour `height`.

Les valeurs décrites ci-après s'appliquent aussi bien à la propriété height qu'à la propriété logique correspondante : inline-size ou block-size.

height: auto;

Le navigateur détermine automatiquement la hauteur de l'élément, en général la hauteur est déterminée de façon à ce que le contenu soit entièrement visible.

La valeur auto dimensionne la hauteur de l'élément vert pour que tout le texte soit visible.
height: 200px;

La hauteur de l'élément est imposée à la dimension indiquée. C'est un nombre positif ou égal à 0, suivi d'une unité de dimension (voir les unités de dimension). Le contenu peut donc éventuellement déborder de l'élément si la hauteur est définie à une valeur insuffisante. Voyez la propriété overflow pour masquer le débordement, ou afficher une barre de défilement.

La hauteur de l'élément vert est imposée à une valeur insuffisante : le contenu peut déborder.

Si la valeur est exprimée en pourcentages, la logique est plus compliquée et dépend de la façon dont est définie la hauteur de l'élément parent :
- La hauteur de l'élément parent est fixée. Dans ce cas le pourcentage se calcule bien par rapport à la hauteur du parent.
- La hauteur de l'élément parent n'est pas fixée (valeur auto par exemple). Dans ce cas le pourcentage utilisé pour fixer la hauteur de l'élément enfant n'est pas calculé :la hauteur est fixée à auto. Ceci a été pensé pour éviter un calcul insoluble : en effet, si le parent à une hauteur qui dépend du contenu (auto par exemple), on se retrouve avec un calcul circulaire insoluble : la hauteur du parent dépend de la hauteur du contenu et cette dernière dépend de la hauteur du parent.
La hauteur du parent (bleu) n'est pas fixée.
La hauteur de l'élément vert (50%) est ramenée à auto.

La hauteur du parent est fixée à 150 pixels.
La hauteur de l'élément enfant est bien de 50%.
height: min-content; height: max-content; height: fit-content; height: fit-content(d);

Ces valeurs sont intéressantes pour du texte écrit verticalement, comme dans les langues CJK par exemple. Elles calculent une hauteur en fonction du contenu et de la place disponible.

Pour une description plus précise de ces valeurs, reportez-vous à min-content, max-content, fit-content, fit-content().
height: initial; (auto) height: inherit; height: revert; height: revertLayer; height: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `height`.

La propriété est souvent animée pour des effets visuels divers, comme par exemple faire dérouler un menu.

Édition

Annuler

Couper

Copier

Coller

Manipulation de la propriété `height` par programme.

Les exemples de code ci-dessous sont donnés avec la propriété height mais seront facilement transposables aux propriétés logiques.

Changement de la hauteur d'un élément avec Javascript.

Deux syntaxes sont possibles. La première accède aux styles via le tableau style[]. La deuxième utilise une notation plus habituelle dans les langages objets.


	let el = document.getElementById('id');
	el.style['height'] = '5cm';
	// ou
	let el = document.getElementById('id');
	el.style.height = '5cm';

Récupération de la hauteur d'un élément avec Javascript.

Le code ci-dessous fonctionne si la propriété a été affectée, soit avec le code ci-dessus, soit directement à l'élément lui-même via son attribut style (et non pas en passant par un sélecteur CSS).


	let el = document.getElementById('id');
	let value = el.style['height'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.height;

Récupération de la valeur calculée de `height`.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives et d'un héritage éventuel provenant de la cascade. A défaut, la valeur calculée sera la valeur initiale de la propriété, soit auto dans le cas de block-size.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('height');

Changement de la hauteur d'un élément avec JQuery.


 $('#id').css('height', '5cm');

Récupération de la hauteur d'un élément avec JQuery.


	let value = $('#id').css('height');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété block-size et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est sérialisée la valeur de block-size. On constate en particulier que toutes les unités sont converties en pixels.

Prise en charge de `height` par les navigateurs.

Toutes ces propriétés sont correctement prises en charge par tous les navigateurs actuels. Cependant Internet Explorer ne traite pas les propriétés logiques (qui prennent en compte le sens d'écriture) mais IE n'est plus utilisé.

Colonne 1

Suppport de la propriété physique height pour définir la hauteur d'un élément.

Colonne 2

Support de la propriété logique (qui prend en compte le mode d'écriture de la langue) block-size pour définir la dimension d'un élément dans le sens des blocs.

Colonne 3

Support de la propriété logique (qui prend en compte le mode d'écriture de la langue) inline-size pour définir la dimension d'un élément dans le sens des lignes.

Propriété
height

Propriété
block-size

Propriété
inline-size

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `height`.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Première définition de la propriété height.
La hauteur d'un élément est définie comme étant la hauteur du contenu, sans les marges intérieures ni l'épaisseur de la bordure.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Ajout de la valeur inherit pour la propriété height.
Introduction de la propriété box-sizing qui modifie la méthode de calcul des dimensions d'un élément.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Propriétés et valeurs logiques - Niveau 1

Introduction de deux propriétés logiques pour définir les dimensions d'un élément contextuellement par rapport au mode d'écriture de la langue utilisée : inline-size et block-size.

18 Mai 2017
Document de travail.
Module CSS - Dimensionnement des blocs Niveau 3

La propriété height accepte les valeurs définissant une dimension par rapport au contenu : min-content, max-content, etc.

27 Septembre 2012
Document de travail.
Module CSS - Dimensionnement des blocs Niveau 4

Pas de changement concernant la propriété height.

26 Mai 2020
Document de travail.

Voir aussi, concernant la dimension des éléments.

Les propriétés height, inline-size et block-size sont décrites dans le module Module CSS - Dimensionnement des blocs. De nombreuses autres définitions gèrent les dimensions d'un élément.