Le Tutoriel de CSS Overflow

View more Tutorials:

1- CSS Overflow

Lorsque le contenu d'un élément est plus grand que l'espace fourni par l'élément, le contenu peut déborder. CSS overflow vous permet de configurer le comportement des éléments dans ce cas.
Remarque : CSS overflow  ne fonctionne qu'avec les éléments de bloc (block element) qui sont spécifiés à une hauteur spécifique.
Les valeurs possibles de  CSS overflow :
  • visible
  • hidden
  • scroll
  • auto

2- CSS {overflow: visible}

CSS {overflow: visible}: (Défaut). Si le contenu de l'élément est plus grand que l'espace fourni par l'élément, il débordera, ce qui est le comportement par défaut. 
overflow-visible-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>

      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>

   </head>
   <body>
       <h1>CSS {overflow:visible} (Default)</h1>
       <hr/>

       <div style="width: 200px; height: 100px; overflow: visible">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

3- CSS {overflow: hidden}

CSS {overflow: hidden}: Le contenu débordant l'espace de l'élément sera masqué.
overflow-hidden-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>

      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>

   </head>
   <body>
       <h1>CSS {overflow:hidden}</h1>
       <hr/>

       <div style="width: 200px; height: 100px; overflow: hidden">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

4- CSS {overflow: scroll}

CSS {overflow: scroll}: Le navigateur créera une barre de défilement pour l'élément. Les utilisateurs peuvent utiliser la barre de défilement pour afficher le reste du contenu. 
Remarque : Pour la plupart des navigateurs et des systèmes d'exploitation, la barre de défilement d'un élément apparaît toujours même lorsque le contenu de l'élément est inférieur à l'espace fourni par l'élément. Des exceptions se produisent avec Mac OSX Lion, les barres de défilement n'apparaissent que lorsque nécessaire.
overflow-scroll-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>

      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>

   </head>
   <body>
       <h1>CSS {overflow:scroll}</h1>
       <hr/>

       <div style="width: 200px; height: 100px; overflow: scroll">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

5- CSS {overflow: auto}

CSS {overflow: auto}: Similaire à  'scroll',mais la barre de défilement n'apparaît que lorsque le contenu est plus grand que l'espace fourni par l'élément.
overflow-auto-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>

      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>

   </head>
   <body>
       <h1>CSS {overflow:auto}</h1>
       <hr/>

       <div style="height: 105px; overflow: auto">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
             <br/>
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

6- CSS overflow-x, overflow-y

Au lieu d'utiliser  CSS overflow vous pouvez utiliser  CSS overflow-x et  CSS overflow-y. Les valeurs possibles de  CSS overflow-x, CSS overflow-y sont comme ceux de  CSS overflow.
  • visible
  • hidden
  • scroll
  • auto

CSS overflow-x

CSS overflow-x est utilisé pour configurer le comportement d'un élément lorsque son contenu déborde (overflow) horizontalement.

CSS overflow-y

CSS overflow-y est utilisé pour configurer le comportement de l'élément lorsque son contenu déborde (overflow) verticalement.
Remarque : Vous pouvez spécifier une paire de valeurs pour (overflow-x,overflow-y), mais le navigateur recalculera cette paire de valeurs, car la paire de valeurs que vous avez spécifiée ne peut pas être réelle. Par exemple, (visible, hidden) sera recalculé en​​​​​​​ (scroll, hidden).
Le tableau suivant contient 2 colonnes. La première colonne contient les paires de valeurs que vous spécifiez. La deuxième colonne contient les paires de valeurs que le navigateur a recalculées.
Specified values Computed values
(visible, visible) (visible, visible)
(visible, hidden) (scroll, hidden)
(visible, scroll) (scroll, scroll)
(visible, auto) (scroll, auto)
 
(hidden, visible) (hidden, scroll)
(hidden, hidden) (hidden, hidden)
(hidden, scroll) (hidden, scroll)
(hidden, auto) (hidden, auto)
 
(scroll, visible) (scroll, scroll)
(scroll, hidden) (scroll, hidden)
(scroll, scroll) (scroll, scroll)
(scroll, auto) (scroll, auto)
 
(auto, visible) (auto, scroll)
(auto, hidden) (auto, hidden)
(auto, scroll) (auto, scroll)
(auto, auto) (auto, auto)
overflow-x-y-example.js
function changeOverflowX(event) {
   value = event.target.value;
   var myDiv = document.getElementById("myDiv");
   myDiv.style.overflowX = value;
}

function changeOverflowY(event) {
   value = event.target.value;
   var myDiv = document.getElementById("myDiv");
   myDiv.style.overflowY = value;
}
overflow-x-y-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>
      <style>
         #myDiv  {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 15px;
         }
      </style>
      <script src="overflow-x-y-example.js"> </script>
   </head>
   <body>
       <h2>CSS overflow-x, overflow-y</h2>
       <hr/>
       <div style="display: inline-block; width: 150px;">
         <p>Overflow-x:</p>
         <input type="radio" name="overflowX" value="visible" onClick="changeOverflowX(event)" checked/> Visible <br/>
         <input type="radio" name="overflowX" value="hidden" onClick="changeOverflowX(event)"/> Hidden <br/>
         <input type="radio" name="overflowX" value="scroll" onClick="changeOverflowX(event)"/> Scroll <br/>
         <input type="radio" name="overflowX" value="auto" onClick="changeOverflowX(event)"/> Auto <br/>
       </div>

       <div style="display: inline-block; width: 150px;">
         <p>Overflow-y:</p>
         <input type="radio" name="overflowY" value="visible" onClick="changeOverflowY(event)" checked/> Visible <br/>
         <input type="radio" name="overflowY" value="hidden" onClick="changeOverflowY(event)"/> Hidden <br/>
         <input type="radio" name="overflowY" value="scroll" onClick="changeOverflowY(event)"/> Scroll <br/>
         <input type="radio" name="overflowY" value="auto" onClick="changeOverflowY(event)"/> Auto <br/>
       </div>

       <div id="infoDiv">

       </div>

       <div id="myDiv" style="height: 50px; width:200px; overflow-x: visible;">

           The value of Pi is <br/>
           3.1415926535897932384626433832795029.

           The value of e is <br/>

           2.718281828459045235360287471352662

       </div>
   </body>
</html>

View more Tutorials: