Accueil    CSS    Propriété overflow
 



style css overflow  Style CSS overflow

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


La propriété overflow permet d'attribuer un comportement à un élément html pour gérer le cas où son contenu atteint et dépasse sa taille (il faut pour celà que le conteneur soit dimensionné avec les propriétés height et width). Le cas d'utilisation le plus courant est alors de mettre en place des barres de scroll pour conserver le contenu visible et préserver la taille de l'élément en utilisant les valeurs "auto" ou "scroll".

Ses différentes valeurs sont :
   - auto : les scrollbars sont affichées uniquement si le contenu dépasse la taille du conteneur
   - hidden : pas de scrollbars, le contenu qui dépasse la taille du conteneur n'est pas visible
   - scroll : les scrollbars horizontales et verticales sont systématiquement visibles
   - visible : pas de scrollbars, le contenu s'affiche en dehors du conteneur s'il dépasse sa taille

Il est possible de définir spécifiquement le comportement horizontal ou vertical avec les propriétés overflow-x et overflow-y.



Propriétés pour le style overflow :




Propriété Définition Valeurs CSS
overflow Indique le comportement à appliquer à un élément lorsque le contenu dépasse sa taille (spécifiquement au niveau de l'affichage de scrollbars) auto
hidden
scroll
visible
inherit
CSS 2


Exemple d'utilisation du style css overflow :




Utilisation des différentes valorisations de la propriété overflow :

<div style="width:300px; height:60px; overflow:scroll; border:dotted 1px black;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   <br />overflow:scroll;
   <br />Des scrollbars horizontales et verticales sont ajoutées systématiquement.
</div >

<div style="width:300px; height:60px; overflow:hidden; border:dotted 1px black;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   overflow:hidden;
   <br />Le contenu est masqué par le conteneur s'il dépasse sa taille.
</div >

<div style="width:300px; height:60px; overflow:auto; border:dotted 1px black;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   <br />overflow:auto;
   <br />Des scrollbars sont ajoutées si besoin si le contenu dépasse la taille.
</div >

<div style="width:300px; height:60px; overflow:scroll; border:dotted 1px black;">
   Exemple de texte inclus dans un élément de taille fixe avec la propriété :
   <br />overflow:visible;
   <br />Le contenu sort du conteneur s'il dépasse sa taille.
</div >



Exemple de texte inclus dans un élément de taille fixe avec la propriété :
overflow:scroll;
Des scrollbars horizontales et verticales sont ajoutées systématiquement.


Exemple de texte inclus dans un élément de taille fixe avec la propriété : overflow:hidden;
Le contenu est masqué par le conteneur s'il dépasse sa taille.


Exemple de texte inclus dans un élément de taille fixe avec la propriété :
overflow:auto;
Des scrollbars sont ajoutées si besoin si le contenu dépasse la taille.


Exemple de texte inclus dans un élément de taille fixe avec la propriété :
overflow:visible;
Le contenu sort du conteneur s'il dépasse sa taille.