CSS/Eigenschaften/Anzeige/overflow
Normalerweise sollte die Größe eines Elements so gewählt sein, dass der anzuzeigende Inhalt sichtbar dargestellt wird. Alle Browser stellen ohne weitere Angaben die Elemente auch entsprechend dar. Wenn der Viewport nicht ausreicht, werden Scrollleisten eingeblendet.
Die Eigenschaft overflow ermöglicht es, Inhalte größer als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Damit die Inhalte trotzdem erreichbar sind, können Sie bestimmen, ob Scrollbalken erscheinen sollen. Zudem war früher overflow:hidden für Gestaltung mehrspaltiger Layouts verwendbar.
overflow-x einen Wert festlegen, wird automatisch der Wert für overflow-y auf auto anstelle des Standardwerts visible gesetzt. Dies führt zu einer leichten vertikalen Verschiebung der nachfolgenden Elemente.Inhaltsverzeichnis
overflow-x[Bearbeiten]
Mit overflow-x lässt sich angeben, wie übergroßer Inhalt hinsichtlich der Breite des Elements behandelt wird. Diese Eigenschaft war ursprünglich eine proprietäre Eigenschaft des Internet Explorers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow-x</title>
<style>
...
#eins { overflow-x: auto; }
#zwei { overflow-x: scroll; }
#drei { overflow-x: visible; }
#vier { overflow-x: hidden; }
#fuenf { overflow-x: no-display; }
#sechs { overflow-x: no-content; }
</style>
</head>
<body>
<h1>übergroße Inhalte</h1>
<h2>Darstellung ohne overflow</h2>
<p>
<img src="https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
<h2>Darstellung mit ausreichender Höhe und allen Varianten für <code>overflow-x</code></h2>
<figure>
<figcaption>overflow-x: auto;</figcaption>
<p id="eins">
<img src="https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
...
</body>
</html>
Sie können bestimmen, wie sich der Inhalt eines Elements verhält, wenn die zur Verfügung stehende Breite nicht ausreichend ist. Erlaubt sind dabei folgende Angaben:
-
auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung -
scroll, Inhalte sind per Scrollbalken erreichbar -
visible, Inhalte sind sichtbar (Standardwert) -
hidden, Inhalte sind unsichtbar -
no-display, das Element wird entfernt, so als obdisplay:nonegesetzt wäre -
no-content, der Inhalt wird nicht angezeigt, so als obvisibility:hiddengesetzt wäre
html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.Achtung!
no-display und no-content werden gegenwärtig (Mai 2015) von den Browsern nicht unterstützt. overflow-y[Bearbeiten]
Mit overflow-y lässt sich angeben, wie übergroßer Inhalt hinsichtlich der Höhe des Elements behandelt wird. Diese Eigenschaft war ursprünglich eine proprietäre Eigenschaft des Internet Explorers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow-y</title>
<style>
...
#eins { overflow-y: auto; }
#zwei { overflow-y: scroll; }
#drei { overflow-y: visible; }
#vier { overflow-y: hidden; }
#fuenf { overflow-y: no-display; }
#sechs { overflow-y: no-content; }
</style>
</head>
<body>
<h1>übergroße Inhalte</h1>
<h2>Darstellung ohne overflow</h2>
<p>
<img src="https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
<h2>Darstellung mit ausreichender Breite und allen Varianten für <code>overflow-y</code></h2>
<figure>
<figcaption>overflow-y: auto;</figcaption>
<p id="eins">
<img src="https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
...
</body>
</html>
Sie können bestimmen, wie sich der Inhalt eines Elements verhält, wenn die zur Verfügung stehende Höhe nicht ausreichend ist. Erlaubt sind dabei folgende Angaben:
-
auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung -
scroll, Inhalte sind per Scrollbalken erreichbar -
visible, Inhalte sind sichtbar (Standardwert) -
hidden, Inhalte sind unsichtbar -
no-display, das Element wird entfernt, so als obdisplay:nonegesetzt wäre -
no-content, der Inhalt wird nicht angezeigt, so als obvisibility:hiddengesetzt wäre
html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.Achtung!
no-display und no-content werden gegenwärtig (Mai 2015) von den Browsern nicht unterstützt. overflow[Bearbeiten]
Mit der Eigenschaft overflow lässt sich angeben, wie der Inhalt eines Elements dargestellt werden soll, wenn dieser größer als der Anzeigebereich ist.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style>
...
#eins { overflow: auto; }
#zwei { overflow: scroll; }
#drei { overflow: visible; }
#vier { overflow: hidden; }
#fuenf { overflow: no-display; }
#sechs { overflow: no-content; }
</style>
</head>
<body>
<h1>übergroße Inhalte</h1>
<h2>Darstellung ohne overflow</h2>
<p>
<img src="https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
<h2>Darstellung mit allen Varianten für <code>overflow</code></h2>
<figure>
<figcaption>overflow: auto;</figcaption>
<p id="eins">
<img src="https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
...
</body>
</html>
Sie können bestimmen, wie sich der Inhalt eines Elements verhält, wenn der zur Verfügung stehende Platz nicht ausreichend ist. Erlaubt sind dabei folgende Angaben:
-
auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung -
scroll, Inhalte sind per Scrollbalken erreichbar -
visible, Inhalte sind sichtbar -
hidden, Inhalte sind unsichtbar -
no-display, das Element wird entfernt, so als obdisplay:nonegesetzt wäre -
no-content, der Inhalt wird nicht angezeigt, so als obvisibility:hiddengesetzt wäre
html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.Achtung!
no-display und no-content werden gegenwärtig (Mai 2014) von den Browsern nicht unterstützt. Mit CSS3 wird das Konzept von overflow erweitert. overflow ist jetzt eine Zusammenfassung der Einzeleigenschaften overflow-x und overflow-y.
p { overflow: hidden visible; }
p { overflow-x: hidden;
overflow-y: visible; }
Hinweis
overflow-x, overflow-y und overflow-style.Achtung!
overflow nicht als zusammenfassende Eigenschaft interpretiert. overflow-style[Bearbeiten]
Mit der Eigenschaft overflow-style wird es möglich sein, die Art des Scrollens festzulegen um den über den Anzeigebereich hinausragenden Inhalt des Elements zu erreichen.
Sie können bestimmen auf welche Weise der überfließende Inhalt erreicht werden soll. Erlaubt sind die Angaben:
-
scroll, Scrollbalken -
panner, kleines Rechteck in einem großen, bekannt von Digitalkameras -
move, direkt mit der Maus bewegbar -
marquee, automatische Bewegung
Achtung!
Siehe auch[Bearbeiten]
- Referenz: overflow
