Propriété CSS overflow-y

La propriété overflow-y spécifie si le contenu doit être masqué, visible ou défilé verticalement lorsque le contenu dépasse les bords supérieur et inférieur de l’élément. Cette propriété fait partie des propriétés CSS3.

La propriété overflow-y possède quatre valeurs principales : visible, hidden, auto et scroll.

INFO

Si la valeur de overflow-y est définie sur visible, la valeur de overflow-x sera, par défaut, définie sur visible. Si la valeur de overflow-y est définie sur scroll, auto ou hidden, la valeur de overflow-x sera définie sur auto.

Valeur initiale	visible
S’applique à	Conteneurs de blocs, conteneurs flex et conteneurs grid.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.overflowY = "auto";

INFO

La propriété overflow-x peut être utilisée pour définir le découpage des côtés droit et gauche.

Syntaxe

CSS overflow-y

css

overflow-y: visible | hidden | scroll | auto | initial | inherit;

Exemple de la propriété overflow-y :

Exemple de code CSS overflow-y

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

Résultat

CSS overflow-y visible

Exemple de la propriété overflow-y avec la valeur "visible" :

Exemple CSS overflow-y visible

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.visible {
        background-color: #8ebf42;
        color: #666;
        height: 40px;
        width: 200px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété overflow-y avec la valeur "hidden" :

Exemple CSS overflow-y hidden

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.hidden {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété overflow-y avec la valeur "auto" :

Exemple CSS overflow-y auto

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.auto {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété overflow-y avec toutes les valeurs :

Exemple CSS overflow-y toutes les valeurs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: scroll;
      }
      div.hidden {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: hidden;
      }
      div.auto {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: auto;
      }
      div.visible {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Play it
visible	Le contenu n’est pas rogné et s’affiche en dehors des bords supérieur et inférieur de la boîte de remplissage. C’est la valeur par défaut de cette propriété.	Play it »
hidden	Le contenu est rogné pour s’adapter verticalement dans la boîte de remplissage. Aucune barre de défilement n’est ajoutée.	Play it »
scroll	Le contenu est rogné pour s’adapter verticalement dans la boîte de remplissage. La barre de défilement est ajoutée pour voir le reste du contenu.	Play it »
auto	Le contenu est rogné pour s’adapter verticalement dans la boîte de remplissage. Dépend du navigateur. Si le contenu déborde, une barre de défilement est ajoutée.	Play it »
initial	Fait en sorte que la propriété utilise sa valeur par défaut.	Play it »
inherit	Hérite de la propriété de son élément parent.

Practice

What does the overflow-y property in CSS do?

It sets what to do when content is too big to fit in its box vertically and it overflows.It sets the background color of an element.It allows to set the visibility of elements.It controls how overflowed content is displayed vertically.It determines how content is aligned within its box horizontally.

Propriété CSS overflow-y ​

Syntaxe ​

Exemple de la propriété overflow-y : ​

Résultat ​

Exemple de la propriété overflow-y avec la valeur "visible" : ​

Exemple de la propriété overflow-y avec la valeur "hidden" : ​

Exemple de la propriété overflow-y avec la valeur "auto" : ​

Exemple de la propriété overflow-y avec toutes les valeurs : ​

Valeurs ​

Practice ​

Propriété CSS overflow-y

Syntaxe

Exemple de la propriété overflow-y :

Résultat

Exemple de la propriété overflow-y avec la valeur "visible" :

Exemple de la propriété overflow-y avec la valeur "hidden" :

Exemple de la propriété overflow-y avec la valeur "auto" :

Exemple de la propriété overflow-y avec toutes les valeurs :

Valeurs

Practice