Le Tutoriel de CSS Overflow

CSS Overflow
CSS {overflow: visible}
CSS {overflow: hidden}
CSS {overflow: scroll}
CSS {overflow: auto}
CSS overflow-x, overflow-y

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.

https://ex1.o7planning.com/css/overflow/overflow-auto-example.html

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>