overflow CSS propriété

Définition de la CSS overflow.

La propriété CSS overflow un raccourci qui permet de gérer la manière dont est rogné le contenu lorsque votre contenu est plus grand que la taille spécifiée de votre élément. La propriété CSS overflow gère aussi la manière dont est affiché les barres de défilement (scrollbar) de l'élément.

Exemple de syntaxe CSS overflow :

overflow : visible;
overflow : hidden;
overflow : scroll;
overflow : auto;

La propriété de feuille de style overflow CSS peut prendre la valeur de rognage :

visible : rend visible tout ce qui dépasse de l'élément et ne met pas de barre de défilement. Valeur par défaut.
hidden : cache tout ce qui dépasse de l'élément et ne met pas de barre de défilement (scrollbar).
scroll : met toujours une barre de défilement horizontale et verticale.
auto : met une barre de défilement horizontale ou verticale si besoin.
inherit : hérite de la propriété CSS overflow de son parent (CSS2).

Exemple de code overflow CSS

Conditions d'application de la CSS overflow.

La propriété de feuille de style overflow CSS est applicable sur toutes les balises HTML ou XHTML dont on a précisé la taille : width, max-width pour les débordements horizontaux ou height, max-height pour les débordements verticaux et qui ne sont pas de type display:inline.

Problème d'interprétation de overflow en Css.

Attention, pour les versions Internet Explorer < 7 pour overflow:visible le bloc s'adapte au contenu.

Propriétés CSS utilisées dans le raccourci overflow.

Spécifier les propriétés d'overflow Css individuellement

Si vous ne voulez pas utiliser le raccourci Css overflow, vous pouvez définir individuellement chaque propriété Css de l'overflow en utilisant une des propriétés CSS suivante :

overflow-x : définie l'overflow horizontal.
overflow-y : définie l' overflow vertical.

Exemple d'écriture CSS de propriétés d'overflow spécifiées individuellement :

.identifiant{
  overflow-y : hidden;
  overflow-x : auto; 
}

Compatibilités navigateurs de la propriété overflow

Détails des versions de la CSS overflow: Propriété overflow est compatible avec CSS2 et plus.

Résumé du support navigateurs de la CSS overflow: Propriété CSS overflow est compatible à partir de Chrome 1; Propriété CSS overflow est compatible à partir de Firefox 1; Propriété CSS overflow est compatible à partir de Internet Explorer 6; Propriété CSS overflow est compatible à partir de Opera 7; Propriété CSS overflow est compatible à partir de Safari 1

Equivalence de la CSS overflow en HTML.

La propriété CSS overflow peut remplacer l'attribut scrolling de la balise HTML iframe.

Votre avis sur la définition overflow en CSS

Votez pour la définition CSS `overflow`

Votes: 4.3 / 5 - 77 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css overflow

Définitions CSS annexes overflow

display: La propriété CSS DISPLAY permet de modifier le type de rendu d'un élément.Exemple d'écriture CSS de display display : block; display : inline; display...[ display ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
max-height: La propriété de Hauteur CSS MAX-HEIGHT permet de spécifier la hauteur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d...[ max-height ]
max-width: La propriété de Longueur CSS MAX-WIDTH permet de spécifier la longueur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple ...[ max-width ]
overflow-x: La propriété CSS OVERFLOW-X permet de gérer la manière dont est rogné horizontalement le contenu lorsque votre contenu est plus large que la longueur ...[ overflow-x ]
overflow-y: La propriété CSS OVERFLOW-Y permet de gérer la manière dont est rogné verticalement le contenu lorsque votre contenu est plus haut que la hauteur spéc...[ overflow-y ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]

Définitions HTML annexes overflow

iframe: La balise HTML et XHTML IFRAME est utilisée pour introduire une page HTML et XHTML au sein de votre document html.<IFRAME > </IFRAME> Son équivalant p...[ iframe ]