Accueil    CSS    Propriété height
 



style css height  Style CSS height

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


La propriété height détermine la hauteur d'un élément html. Par défaut, si cette hauteur n'est pas définie, la taille de l'élément s'adaptera à son contenu. La propriété overflow permet de modifier le comportement du conteneur et par exemple d'afficher des barres de scroll lorsque le texte atteint une hauteur spécifiée.

Suivant le contenu que l'on souhaite afficher, la hauteur peut varier et on souhaite alors éviter de donner une valeur fixe. Il est possible dans ce cas de définir les styles css min-height et max-height pour fixer une fourchette de valeurs.

La hauteur "height" 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 height :




Propriété Définition Valeurs CSS
height Détermine la hauteur d'un élément auto
valeur (px, em ...)
%
inherit
CSS 1


Exemple d'utilisation du style css height :






<div style="border:solid 1px black; padding:5px; width:400px;">
   Exemple de texte inclus dans un élément dont la hauteur n'est pas spécifiée.
   <br />La taille du conteneur s'adapte au texte qu'il contient.
</div>

<div style="border:solid 1px black; padding:5px; width:400px; height:60px;">
   Exemple de texte inclus dans un élément dont la hauteur est spécifiée :
   <br />height:60px
   <br />Si le texte dépasse, il sort de la limite du conteneur sans modifier celui-ci.
</div>

<div style="border:solid 1px black; padding:5px; width:400px; height:60px;
   overflow:auto;">
   Exemple de texte inclus dans un élément dont la hauteur est spécifiée :
   <br />height:60px
   <br />Emploi de la propiété overflow:auto pour faire apparaître des barres de scroll.
</div>


Exemple de texte inclus dans un élément dont la hauteur n'est pas spécifiée.
La taille du conteneur s'adapte au texte qu'il contient.


Exemple de texte inclus dans un élément dont la hauteur est spécifiée :
height:60px
Si le texte dépasse, il sort de la limite du conteneur sans modifier celui-ci.


Exemple de texte inclus dans un élément dont la hauteur est spécifiée :
height:60px
Emploi de la propiété overflow:auto pour faire apparaître des barres de scroll.