CSS - débordement

La description

La propriété overflow détermine comment le contenu qui déborde la zone de contenu de son élément doit être traité.

Valeurs possibles

  • visible - Le contenu débordant doit être affiché.

  • hidden - Le contenu débordant ne doit pas être affiché.

  • scroll - Le contenu débordant ne doit pas être affiché, mais l'agent utilisateur doit fournir certains moyens d'accéder au contenu caché (par exemple, un ensemble de barres de défilement).

  • auto - Le comportement provoqué par cette valeur dépend du navigateur.

S'applique à

Tous les éléments HTML.

Syntaxe DOM

object.style.overflow = "scroll";

Exemple

Voici l'exemple -

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
   
      <p>Example of scroll value:</p>
      
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      
   </body>
</html>

Cela produira le résultat suivant -