overflow

Résumé

La propriété CSS overflow définie comment le contenu est rogné, les barres de défilement affichées ou afficher le contenu en débord dans un élément bloc.

  • Valeur initiale visible
  • S'applique à non-replaced block-level elements and non-replaced inline-block elements
  • Héritée non
  • Pourcentages
  • Média visual
  • Valeur calculée comme spécifié
  • Animable non
  • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

overflow:  visible | hidden | scroll | auto | inherit

Valeurs

visible
Valeur par défaut. Le contenu n'est pas rogné, il peut être affiché en dehors de la boîte de contenu.
hidden
Le contenu rogné et aucune barre de défilement n'est affichée.
scroll
Le contenu est rogné et les navigateurs de bureau utilisent des barres de défilement, que du contenu soit rogné ou non. Ceci évite tout problème de barre de défilement qui apparaissent puis disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu hors cadre.
auto
Dépend de l'user-agent. Les navigateurs de bureau comme Firefox affichent des barres de défilement si le contenu dépasse.

Extensions Mozilla

-moz-scrollbars-none
Utilisez overflow:hidden à la place.
-moz-scrollbars-horizontal
L'utilisation de overflow-x et overflow-y est préférée.
-moz-scrollbars-vertical
L'utilisation de overflow-x et overflow-y est préférée.
-moz-hidden-unscrollable
Prévu pour l'usage interne et par les thèmes. Désactive le défilement à l'aide des flèches et de la roulette de la souris pour les éléments XML racines et de <html>, <body>.

Exemples

p {  
     width: 12em;
     border: dotted;
     overflow: auto;   /* ajoute des barres de défilement si nécessaire */ 
}

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
short text

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Notes

Jusqu'à Gecko 1.9.2 (Firefox 3.6), la propriété overflow n'était pas appliquée correctement aux éléments de tableaux (<thead> , <tbody> , <tfoot>). Ce comportement a été corrigé dans les versions plus récentes.

Spécifications

Compatibilité des navigateurs

Navigateur Version la plus basse
Internet Explorer 4.0 [*]
Firefox (Gecko) 1.0 (1.0)
Opera 4.0-7.0
Safari (WebKit) 1.0 (85)

[*] IE 4-6 agrandi un élément à l'usage de overflow:visible (valeur par défaut) pour placer le contenu. height/width se comporte alors comme min-height/min-width.

Voir également

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : FredB
Dernière mise à jour par : FredB,
Masquer la barre latérale