Accueil    CSS    Propriété overflow-y
 



style css overflow-x  Style CSS overflow-y

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


La propriété overflow-y permet d'attribuer un comportement spécifique sur le rendu vertical d'un élément html pour gérer le cas où son contenu dépasse sa hauteur (le conteneur doit être dimensionné avec la propriété height) en permettant par exemple d'afficher une barre de scroll verticale.

Ses différentes valeurs sont :
   - auto : la scrollbar verticale est affichée uniquement si le contenu dépasse la hauteur du conteneur
   - hidden : pas de scrollbar, le contenu qui dépasse la hauteur du conteneur n'est pas visible
   - scroll : la scrollbar verticale est systématiquement visible
   - visible : pas de scrollbar, le contenu s'affiche en dehors du conteneur s'il dépasse sa hauteur

Deux valeurs qui ne sont pas encore implémentées existent également :
   - no-content : si le contenu dépasse la hauteur du conteneur, celui-ci n'est pas visible
      comme si on appliquait le style visibility:hidden (l'espace occupé par l'élément est préservé)
   - no-display : si le contenu dépasse la hauteur du conteneur, celui-ci n'est pas affiché
      comme si on appliquait le style display:none (l'espace pris par l'élément n'est pas préservé)



Propriétés pour le style overflow-y :




Propriété Définition Valeurs CSS
overflow-y Indique le comportement vertical à appliquer à un élément lorsque le contenu dépasse sa hauteur (spécifiquement au niveau de l'affichage de la scrollbar) auto
hidden
no-content
no-display
scroll
visible
inherit
CSS 3


Exemple d'utilisation du style css overflow-y :




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

<div style="width:550px; height:70px; overflow-y:scroll; border:dotted 1px black; white-space:nowrap;">
   Exemple de texte inclus dans un élément de hauteur fixe avec la propriété :
   <br />overflow-y:scroll;
   <br />La scrollbar verticale est ajoutée systématiquement.
</div >

<div style="width:550px; height:70px; overflow-y:hidden; border:dotted 1px black; white-space:nowrap;">
   Exemple de texte inclus dans un élément de hauteur fixe avec la propriété :
   <br />overflow-y:hidden;
   <br />Le contenu est masqué par le conteneur s'il dépasse sa hauteur
   <br />et n'est donc pas visible.
</div >

<div style="width:550px; height:70px; overflow-y:auto; border:dotted 1px black; white-space:nowrap;">
   Exemple de texte inclus dans un élément de hauteur fixe avec la propriété :
   <br />overflow-y:auto;
   <br />
   <br />La scrollbar verticale est ajoutée uniquement
   <br />si le contenu dépasse la taille.
</div >

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



Exemple de texte inclus dans un élément de hauteur fixe avec la propriété :
overflow-y:scroll;
La scrollbar verticale est ajoutée systématiquement.


Exemple de texte inclus dans un élément de hauteur fixe avec la propriété :
overflow-y:hidden;

Le contenu est masqué par le conteneur s'il dépasse sa hauteur
et n'est donc pas visible.


Exemple de texte inclus dans un élément de hauteur fixe avec la propriété :
overflow-y:auto;


La scrollbar verticale est ajoutée uniquement
si le contenu dépasse la taille.


Exemple de texte inclus dans un élément de hauteur fixe avec la propriété :
overflow-y:visible;


Le contenu sort du conteneur s'il dépasse sa taille
et est donc visible.