Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: overflow-y, Kategorien: Bildschirm­darstellung (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.

CSS-Eigenschaft: overflow-y
KurzbeschreibungWerteStandardwertKategorieHinweis
Elementenüberfluss (vertikale Ausdehnung)
  • visible
  • hidden
  • scroll
  • auto
  • no-display
  • no-content
visible
Allgemein:
Bildschirm­darstellung
CSS 3:
Basic Box Model
Neu in CSS 3
 

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 hidden sorgt dafür, dass zu viel Inhalt in der Vertikalen abgeschnitten und nicht angezeigt wird. Allerdings führt ein overflow-y: hidden dazu, dass overflow-x automatisch den Wert auto einnimmt. Ältere Versionen des Internet Explorers (IE8 und darunter) verhalten sich leicht abweichend.
  • scroll sorgt 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 auto steuert hingegen, dass ein vertikaler Scrollbalken nur bei Bedarf entsteht.
  • Obwohl overflow-y zu den CSS3-Eigenschaften gehört, werden die Werte visible, hidden, scroll und auto schon 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) und no-content (den Inhalt nicht anzeigen, wenn er überlappt) sind später hinzugekommen (im W3C-Standard 2005 dokumentiert). In wie fern no-display und no-content Bestand 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.

Browserunterstützung von overflow-y
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16
w
Version: 20
w
Version: 8Version: 9Version: 10
w
Version: 4Version: 5Version: 6
w
Version: 10Version: 11Version: 12
w

Weiterführende Informationen zu overflow-y:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    overflow-x


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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

American Football
 

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

American Football
 

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

American Football
 

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

Kugel
 

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

American Football
 

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

American Football
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 7.245 sec.

Browser-Marktanteile