CSS3 – Overflow

LEÇON

 

La consommation du flux

Les éléments consomment, ou ne consomment pas, du flux selon leur propriétés display (inline, block, inline-block, none) et position (static, relative, absolute, fixed).

La quantité de flux consommé est déterminée soit par le contenu, soit par la taille du bloc (width, height).

 

position : absolute ou fixed

  • ne consomme pas le flux du conteneur

 

display : none

  • ne consomme pas le flux du conteneur

 

position : static ou relative (sauf display : none)

  • consomme le flux du conteneur
  • si display : inline
    • consomme une quantité du flux selon le contenu (width et height n'ont aucun impact)
  • si display : block
    • si la taille du bloc est entièrement spécifiée (width et height) :
      • consomme une quantité de flux selon la taille du bloc
    • si la taille du bloc n'est pas spécifiée ou est seulement partiellement spécifiée (width ou height) :
      • consomme une quantité de flux selon le contenu
  • si display : inline-block
    • si la taille du bloc est entièrement spécifiée (width et height) et le contenu ne déborde pas :
      • consomme une quantité de flux selon la taille du bloc
    • si la taille du bloc n'est pas spécifiée ou seulement partiellement spécifiée (width ou height) ou le contenu déborde :
      • consomme une quantité de flux selon le contenu

 

Overflow

Alors qu'est-ce qui se passe quand il y a un bloc de taille spécifique avec un contenu trop important pour y être affiché à l'intérieure ?

Réponse : la quantité du flux consommé est donnée par les règles ci-dessus. L'affichage de la partie du contenu qui déborde est contrôlé par la propriété overflow.

La valeur par défaut de la propriété overflow est visible. C'est à dire qu'il sera affiché, éventuellement (selon le cas) en dessous ou par dessus d'autres éléments dans la page.

 

Exemple :

 

body
{
  width:960px;
  margin:0 auto;
  background-color:black;
  color:white;
  font-family:sans-serif;
  font-size:18px;
  text-align:justify;
}

.inset
{
  color:purple;
  background-color:#c0c0c0;
  font-weight:bold;
  font-size:20px;
  float:right;
  width:300px;
  height:100px;
  display:block;
  padding:10px 20px;
  margin:10px 0px 0px 20px;
  position:relative;
  z-index:10;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Overflow exemple 1</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Lorem ipsum dolor sit amet</h1>
        <div class="inset">Integer urna libero, ultricies sit amet auctor sed, elementum quis odio. Donec molestie massa non quam consequat ullamcorper. Pellentesque purus ipsum, mattis in erat et, blandit tristique felis.</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla augue elit, a ornare mauris ornare ac. Mauris erat felis, commodo eget lorem ac, tincidunt mollis ante. Aliquam orci magna, blandit quis ex a, bibendum finibus elit. Morbi vitae interdum felis. Vestibulum dapibus urna tortor, eu congue leo imperdiet quis. Quisque pellentesque non odio eget pulvinar. Mauris ut velit pretium, condimentum nisl vitae, dictum eros. Nunc sagittis massa vitae nisl tristique commodo. Nullam a mattis nulla. Proin euismod nisl ante. Nulla facilisi. Proin ultricies sapien metus, vel lacinia est mollis blandit. Maecenas ornare varius turpis, nec consequat purus iaculis nec. Duis gravida tortor in scelerisque ultricies. Suspendisse mi magna, condimentum non tempus nec, malesuada in velit. Sed pulvinar pellentesque massa, luctus hendrerit mauris laoreet vitae. Ut tempus ullamcorper pretium. Suspendisse id leo ut velit laoreet facilisis. Pellentesque commodo, leo at malesuada laoreet, mauris eros faucibus felis, eu blandit augue tortor non libero. Nulla ullamcorper nulla in nisi semper semper. Nullam tempor enim et nulla porta mattis. Morbi ac tellus tempor, suscipit turpis hendrerit, rhoncus est. Curabitur auctor condimentum justo, ac sodales dui feugiat eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
    </body>
</html>

 

Mini-exercice :

1. Reproduire les fichiers dans l'exemple ci-dessus et ouvrir la page dans un navigateur.

  • Remarquer que le texte en violet déborde.
  • Remarquer que la consommation du flux de la page est limitée par la taille du bloc.

2. Modifier le CSS

  • Ajouter overflow:hidden; dans la classe "inset".
  • Remarquer l'effet de cette modification sur l'affichage de la page.

3. Modifier le CSS

  • changer overflow:hidden; en overflow:visible; dans la classe "inset"
  • également dans la classe "inset", changer width:300px; en width:150px;
  • Remarquer l'effet de ces modifications sur l'affichage de la page.

4. Modifier le CSS

  • dans la classe "inset", supprimer la ligne height:100px;
  • Remarquer l'effet de cette modification sur l'affichage de la page.
  • Important : dans cet exemple on voit le cas où la taille du bloc est partiellement spécifiée. Remarquer comme la quantité du flux consommé est déterminé par le contenu (même si la largeur de cette zone est déterminée par la propriété width).

5. Modifier le CSS

  • Changer position:relative; en position:fixed; dans la classe "inset"
  • Remarquer l'effet de cette modification sur l'affichage de la page.

 

overflow : valeurs possibles

  •  visible (valeur par défaut / contenu qui déborde s'affiche)
  • hidden (contenu qui déborde ne s'affiche pas)
  • scroll (mettre les ascenseurs même si rien ne déborde)
  • auto (mettre les ascenseurs uniquement si débordement)

 

Exemple :

 

body
{
  width:960px;
  margin:0 auto;
  background-color:black;
  color:gray;
  font-weight:bold;
  font-family:sans-serif;
  font-size:20px;
}

.sidebar
{
  color:white;
  background-color:darkorange;
  float:right;
  display:block;
  width:200px;
  height:500px;
  padding:10px;
  margin:0px 0px 20px 20px;
  overflow:visible;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Overflow exemple 2</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Lorem ipsum dolor sit amet</h1>
        <div class="sidebar">
           <p>
             Vivamus fringilla fermentum sodales. Cras sed vehicula nisi. Morbi egestas massa a justo tincidunt, ultrices accumsan libero vestibulum.
           </p>
           <p>
             Quisque venenatis justo turpis, sit amet lobortis felis efficitur sit amet. Aliquam at imperdiet nisi. Integer dignissim nec nisl at fermentum. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis.
           </p>
           <p>
             Pellentesque vel elit venenatis, porttitor nulla id, aliquet purus. In vel accumsan odio. Integer ut ligula eu felis volutpat fermentum quis vitae eros. Fusce dapibus sodales lorem, vel euismod elit aliquet pretium.
           </p>
        </div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis non diam quis ornare. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis. Quisque venenatis justo turpis, sit amet lobortis felis efficitur sit amet. Aliquam at imperdiet nisi. Integer dignissim nec nisl at fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis non diam quis ornare. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis.
        </p>
        <p>
          Sed et ligula sit amet lorem sodales tincidunt vitae ut mi. Ut lacinia tristique ultrices. Maecenas ultrices eros sem, elementum mollis libero elementum ac. Nulla venenatis mauris quis lectus ultrices volutpat. Proin quis tortor semper, efficitur nisi eu, feugiat nisi. Suspendisse dolor lectus, convallis in sem in, rutrum blandit erat. Suspendisse potenti. Pellentesque vel elit venenatis, porttitor nulla id, aliquet purus. In vel accumsan odio. Integer ut ligula eu felis volutpat fermentum quis vitae eros. Fusce dapibus sodales lorem, vel euismod elit aliquet pretium.
        </p>
        <p>
          Nam non nisl elementum, cursus enim tempus, finibus libero. Sed sit amet imperdiet neque. Duis pharetra lacus vel viverra mollis. Nam quam lorem, feugiat non vulputate id, pellentesque a lacus. Ut tincidunt enim nec accumsan maximus. Suspendisse pulvinar sollicitudin porttitor. Sed a tortor lobortis, aliquet urna a, pulvinar nisi. Maecenas sed metus lacus. Nunc laoreet condimentum dui, non condimentum leo eleifend et. Sed nisl turpis, pellentesque et viverra at, porta non nisi. Nullam nunc mauris, hendrerit sit amet aliquam quis, lobortis ut nisl. Proin at magna sit amet quam malesuada fermentum efficitur non diam. Suspendisse sed viverra ante. Duis non diam ac augue sollicitudin placerat.
        </p>
        <p>
          Pellentesque dapibus laoreet lectus, ut ultrices ligula feugiat ac. In ultricies dictum faucibus. Nam at purus at massa placerat elementum vel ullamcorper tortor. Vestibulum orci purus, volutpat at arcu pulvinar, tristique semper est. Vivamus pellentesque magna ipsum, eu finibus dui mollis ut. Suspendisse faucibus mauris et enim ullamcorper volutpat. In vitae lacus consequat, vestibulum metus quis, sollicitudin mauris. Nunc sollicitudin, mauris vitae ullamcorper iaculis, velit erat malesuada neque, quis iaculis mi libero et erat. Nam lacinia rutrum elit ac pretium.
        </p>
    </body>
</html>

 

Mini-exercice :

1. Reproduire les fichiers dans l'exemple ci-dessus et ouvrir la page dans un navigateur.

  • Remarquer que le texte dans le sidebar déborde.

2. Modifier le CSS

  • Changer overflow:visible; en overflow:hidden;
  • Remarquer que le contenu du sidebar ne déborde plus, mais qu'on ne voit pas tout son contenu.

3. Modifier le CSS

  • Changer overflow:hidden; en overflow:scroll;
  • Remarquer que le sidebar comporte des ascenseurs donc en scrollant on a la possibilité de voir tout le contenu.
  • Remarquer aussi que l'ascenseur horizontal est inutile.

4. Modifier le CSS

  • Changer overflow:scroll; en overflow:auto;
  • Remarquer aussi que l'ascenseur horizontal ne s'affiche plus (car inutile).

 

L'utilité de la propriété overflow

Quand le contenu d'un bloc est connu et statique (n'évolue pas) il y a peu d'utilité pour la propriété overflow. Par contre pour éviter que les débordements de contenu inconnu ou évolutif aient un effet catastrophique sur le layout, l'exploitation de la propriété overflow est très efficace.

Des cas où le contenu peut être inconnu ou évolutif :

  • le développeur de la page n'est pas la même personne qui remplit le contenu
  • le contenu peut évoluer à l'avenir mais on ne voudra pas (ou on ne saura pas) faire évoluer le layout
  • le contenu est dynamique (change selon des données disponibles) - par exemple, un flux de sommaires d'actus, un flux de commentaires, un flux de messages envoyé en chat, etc

 

Propriétés max-height et max-width

Dans le cas où on ne connait pas la quantité de contenu à l'avance, la propriété overflow peut donc nous aider à éviter des débordements.

Mais comment gérer le cas contraire ? C'est à dire, quand il y a peu de contenu dans un conteneur, comment faire pour consommer un minimum de place sur la page ?

 

Exemple :

 

body
{
  width:960px;
  margin:0 auto;
  background-color:black;
  color:gray;
  font-weight:bold;
  font-family:sans-serif;
  font-size:20px;
}

.sidebar
{
  color:white;
  background-color:darkorange;
  float:right;
  display:block;
  width:400px;
  height:500px;
  padding:10px;
  margin:0px 0px 20px 20px;
  overflow:auto;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Display inline-block</title>
        <link rel="stylesheet" type="text/css" href="css_overflow_2.css">
    </head>
    <body>
        <h1>Lorem ipsum dolor sit amet</h1>
        <div class="sidebar">
           <p>
             Vivamus fringilla fermentum sodales. Cras sed vehicula nisi. Morbi egestas massa a justo tincidunt, ultrices accumsan libero vestibulum.
           </p>
           <p>
             Quisque venenatis justo turpis, sit amet lobortis felis efficitur sit amet. Aliquam at imperdiet nisi. Integer dignissim nec nisl at fermentum. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis.
           </p>
           <p>
             Nulla venenatis mauris quis lectus ultrices volutpat. Sed et ligula sit amet lorem sodales tincidunt vitae ut mi. Ut lacinia tristique ultrices. Maecenas ultrices eros sem, elementum mollis libero elementum ac.
           </p>
           <p>
             Nam non nisl elementum, cursus enim tempus, finibus libero. Sed sit amet imperdiet neque. Duis pharetra lacus vel viverra mollis. Nam quam lorem, feugiat non vulputate id, pellentesque a lacus.
           </p>
        </div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis non diam quis ornare. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis. Quisque venenatis justo turpis, sit amet lobortis felis efficitur sit amet. Aliquam at imperdiet nisi. Integer dignissim nec nisl at fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis non diam quis ornare. Cras feugiat, elit vel laoreet commodo, nibh purus facilisis libero, eget porta odio turpis vel felis.
        </p>
        <p>
          Sed et ligula sit amet lorem sodales tincidunt vitae ut mi. Ut lacinia tristique ultrices. Maecenas ultrices eros sem, elementum mollis libero elementum ac. Nulla venenatis mauris quis lectus ultrices volutpat. Proin quis tortor semper, efficitur nisi eu, feugiat nisi. Suspendisse dolor lectus, convallis in sem in, rutrum blandit erat. Suspendisse potenti. Pellentesque vel elit venenatis, porttitor nulla id, aliquet purus. In vel accumsan odio. Integer ut ligula eu felis volutpat fermentum quis vitae eros. Fusce dapibus sodales lorem, vel euismod elit aliquet pretium.
        </p>
        <p>
          Nam non nisl elementum, cursus enim tempus, finibus libero. Sed sit amet imperdiet neque. Duis pharetra lacus vel viverra mollis. Nam quam lorem, feugiat non vulputate id, pellentesque a lacus. Ut tincidunt enim nec accumsan maximus. Suspendisse pulvinar sollicitudin porttitor. Sed a tortor lobortis, aliquet urna a, pulvinar nisi. Maecenas sed metus lacus. Nunc laoreet condimentum dui, non condimentum leo eleifend et. Sed nisl turpis, pellentesque et viverra at, porta non nisi. Nullam nunc mauris, hendrerit sit amet aliquam quis, lobortis ut nisl. Proin at magna sit amet quam malesuada fermentum efficitur non diam. Suspendisse sed viverra ante. Duis non diam ac augue sollicitudin placerat.
        </p>
    </body>
</html>

 

Mini-exercice :

1. Reproduire les fichiers dans l'exemple ci-dessus et ouvrir la page dans un navigateur.

  • Remarquer que le texte dans le sidebar déborde mais quil y a un ascenseur.

2. Modifier le HTML

  • Supprimer les 3ème et 4ème paragraphes du sidebar (ceux qui commencent "Nulla venenatis mauris ..." et "Nam non nisl elementum, cursus")
  • Remarquer que le contenu du sidebar ne déborde plus, mais que l'espace réservé pour le sidebar est trop grand.

3. Modifier le CSS

  • Changer height:500px; en max-height:500px;
  • Remarquer que la taille du sidebar s'adapte

4. Modifier le HTML

  • Rétablir les 3ème et 4ème paragraphes.
  • Remarquer que la hauteur maximale est respectée et que l'ascenseur revient.

 

Propriétés min-height et min-width

Ces propriétés existent aussi.

Mini-exercice :

Reproduire le dernier exemple et, au lieu d'une hauteur fixe de 500px, mettre une hauteur minimale/maximale de 300px/500px. Puis expérimenter avec la taille du contenu du sidebar pour voir l'effet de ces paramètres sur l'affichage.

 

 


 

EXERCICES

 

1. Sans utiliser les propriétés background-image, position, z-index ou display reproduire la page suivante. Remarquer que la fin du texte superposé déborde mais ne s'affiche pas. Astuce : pour réussir il faudrait exploiter la propriété overflow deux fois : une fois avec valeur visible (éventuellement par défaut), et une fois avec valeur hidden (valeur explicite). Voici l'URL de l'image.

 

css_overflow_ex1