CSS-Eigenschaft overflow-y

Die Eigenschaft overflow-y definiert, ob der Inhalt ausgeblendet, sichtbar oder vertikal gescrollt werden soll, wenn der Inhalt den oberen und unteren Rand des Elements überläuft.

Die Eigenschaft overflow-y hat vier Werte: visible, hidden, scroll, auto.

Wenn der Wert der Eigenschaft overflow-y auf visible eingestellt ist, wird der Wert von overflow-x voreingestellt auf visible eingestellt.

Wenn der Wert der Eigenschaft overflow-y auf scroll, auto oder hidden eingestellt ist, wird der Wert von overflow-x auf auto eingestellt.

Anfangswert visible
Gilt für Blockcontainer, Flexcontainer und Gittercontainer
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.overflowY = "auto";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div.scroll {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-y</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
  </body>
</html>

Ein anderes Beispiel mit dem Wert "visible":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div.visible {
      background-color: #8ebf42;
      color: #666;
      height: 40px;
      width: 200px;  
      overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-y</h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
  </body>
</html>

Ein weiteres Beispiel mit dem Wert "hidden":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div.hidden {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-y</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
  </body>
</html>

Ein Beispiel mit dem Wert "auto":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div.auto {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-y</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
  </body>
</html>

Ein anderes Beispiel, wo alle vier Werte verwendet wurden:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft overflow-y</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <h3>overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <h3>overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
  </body>
</html>

Werte

Wert Beschreibung
visible Der Inhalt wird nicht abgeschnitten und gerendert außerhalb der Ober- und Unterränder der Polsterbox. Das ist der Standardwert dieser Eigenschaft.
hidden Der Inhalt wird so zugeschnitten, dass er vertikal in die Polsterbox passt. Es wurde keine Scrollbar hinzugefügt.
scroll Der Inhalt wird so zugeschnitten, dass er vertikal in das Polsterfeld passt. Die Scrollbar wird hinzugefügt, um den Rest des Inhalts zu sehen.
auto Der Inhalt wird so zugeschnitten, dass er vertikal in die Polsterbox passt. Hängt vom Browser ab. Wenn Inhalte überlaufen, wird eine Scrollbar hinzugefügt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.5+ 3.0+ 9.5+

Übe dein Wissen

Welche Werte können für die CSS-Eigenschaft 'overflow-y' festgelegt werden?
Finden Sie das nützlich?