mozilla
Vos résultats de recherche

    overflow

    Résumé

    La propriété CSS overflow définit comment rogner le contenu, comment afficher les barres de défilement ou encore comment afficher le contenu sortant du cadre dans un élément de type bloc.

    L'utilisation de la propriété overflow avec une valeur différente de visible, qui est la valeur par défaut, créera un nouveau contexte de formattage. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée. Il faut toutefois noter que, en assignant la valeur scrollTop à l'élément HTML adéquat, même au cas où celui-ci à la valeur overflow à hidden, l'élément pourrait être amené à avoir des barres de défilement.

    • 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 est 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 : 
    Contributors to this page: scaillerie, teoli, FredB
    Dernière mise à jour par : scaillerie,