CSS-Eigenschaft: overflow-y, Kategorien: Bildschirmdarstellung (allgemein), Basic Box Model (CSS 3)
Elementenüberfluss (vertikale Ausdehnung)
Steuert, ob überfließende Inhalte in der vertikalen Richtung angezeigt, versteckt oder mit einem Scrollbalken versehen werden.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Elementenüberfluss (vertikale Ausdehnung) |
| visible |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), Basic Box Model (CSS 3):
- align-content
- align-items
- align-self
- box-decoration-break
- box-shadow
- clear
- clip
- column-count
- column-fill
- column-width
- columns
- cursor
- direction
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- height
- justify-content
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- max-height
- max-width
- min-height
- min-width
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-style
- overflow-x
- Aktuelle Seite: overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- resize
- rotation
- rotation-point
- text-overflow
- unicode-bidi
- visibility
- width
- zoom
Folgendes ist beim Einsatz von overflow-y zu beachten:
overflow-y steuert, wie mit überlappenden Inhalten umgegangen wird.
- Der Standardwert ist
visible. Das bedeutet, wenn Inhalte mehr Platz einnehmen, welchen ein HTML-Element mit festen Dimensionen zur Verfügung hat, überlappt der Inhalt die Ausmaße des umgebenden HTML-Elements und ist sicherbar. - Der Wert
hiddensorgt dafür, dass zu viel Inhalt in der Vertikalen abgeschnitten und nicht angezeigt wird. Allerdings führt einoverflow-y: hiddendazu, dassoverflow-xautomatisch den Wertautoeinnimmt. Ältere Versionen des Internet Explorers (IE8 und darunter) verhalten sich leicht abweichend. scrollsorgt dafür, dass immer ein vertikaler Scrollbalken angezeigt wird, auch wenn der Inhalt im HTML-Element selber den vollständigen Platz nicht ausfüllt.- Der Wert
autosteuert hingegen, dass ein vertikaler Scrollbalken nur bei Bedarf entsteht. - Obwohl
overflow-yzu den CSS3-Eigenschaften gehört, werden die Wertevisible,hidden,scrollundautoschon seit langem und auch browserübergreifend gut unterstützt, selbst (unter bestimmten Rahmenbedingungen) vom IE6. - Die Werte
no-display(das HTML-Element nicht anzeigen, wenn es einen Überhang hat) undno-content(den Inhalt nicht anzeigen, wenn er überlappt) sind später hinzugekommen (im W3C-Standard 2005 dokumentiert). In wie fernno-displayundno-contentBestand haben, ist zum heutigen Zeitpunkt (Januar 2013) unklar. Liest man die Dokumentation des W3C, wirkt es so, als ob diese Werte auch wieder aus dem Standard entfallen könnten. Die Tatsache, dass die Werte (noch) von keinem Browser unterstützt werden, weist zumindest darauf hin.
Der Einsatz von overflow-y sollte stets mit Sorgfalt geschehen.
Einerseits können mit dem Wert hidden Inhalte ungewollt versteckt sein, die ein Nutzer zum Verstehen oder zum Bedienen der Webseite benötigt.
Auch das übermäßige Erzeugen von Scrollbalken, vor allem in vertikaler Richtung, verschlechtert immer die Bedienbarkeit einer Webseite.
Weitere Beispiele sind unter der Eigenschaft overflow zu finden.
Vor allem wird dort auf den Einfluss der Textrichtung eingegangen, die entscheidend ist, in welcher Richtung ein Überhang angezeigt wird.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||
Weiterführende Informationen zu overflow-y:
- W3C Spezifikation:
http://www.w3.org/TR/css3-box/#overflow-y
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
overflow-x - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
padding
Beispiele
HTML:
<div>
<img src="img/american_football.jpg" alt="American Football">
</div>CSS:
div {
border: 10px solid #c00;
width: 250px;
height: 130px;
padding: 10px;
}
/* Ausgangssituation:
Die Grafik liegt in einem DIV mit fester Höhe und Breite. Per Default ist das overflow (der Überhang) sichtbar (Es hat den Standardwert visible).
Wie im Beispiel zu sehen, überlappt das Bild das DIV mit dem roten Rahmen.
Die CSS-Anweisung dieses DIV wirkt in allen folgenden Beispielen. */Beispiel nur für: 
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2">
<img src="img/american_football.jpg" alt="American Football">
</div>CSS:
#example-2 {
overflow-y: hidden;
}
/* Die Darstellung wird in der horizontalen Richtung abgeschnitten.
Nebeneffekt von overflow-y: hidden ist, dass overflow-x dann den Wert auto einnimmt. Es entsteht ein vertikaler Scrollbalken. Abweichend ist die Darstellung im IE8 und darunter. Hier wird overflow-x auch zum hidden */Beispiel nur für:
Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3">
<img src="img/american_football.jpg" alt="American Football">
</div>CSS:
#example-3 {
overflow-y: scroll;
}
/* Wird der Wert scroll gesetzt, entsteht immer in Scrollbalken. Auch hier mit dem Nebeneffekt, falls overflow-y alleine definiert ist, nimmt overflow-x den Wert auto ein.*/Beispiel nur für:
Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="example-4">
<img src="img/ball-blau.png" alt="Kugel">
</div>CSS:
#example-4 {
overflow-y: scroll;
}
/* In Beispiel Nr. 4 wird deutlich, dass overflow-x den Wert auto erhält. Da der Platz für die Kugel ausreicht, entsteht kein vertikaler Scrollbalken */Beispiel nur für:
Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="testcase-standard-1">
<img src="img/american_football.jpg" alt="American Football">
</div>CSS:
#testcase-standard-1 {
overflow-y: no-display;
margin-bottom: 50px;
}
/* Der neue Wert no-display in CSS3 wird (noch) nicht unterstützt. */Testbeispiel: Standardschreibweise
HTML:
<div id="testcase-standard-2">
<img src="img/american_football.jpg" alt="American Football">
</div>CSS:
#testcase-standard-2 {
overflow-y: no-content;
margin-bottom: 50px;
}
/* Der neue Wert no-content in CSS3 wird (noch) nicht unterstützt. */Testbeispiel: Standardschreibweise
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!