CSS-Eigenschaft overflow-y

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.