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.
Durch Setzen der overflow Eigenschaft auf einen anderen Wert als visible wird ein neuer Blockformatierungskontext erzeugt.
Inhaltsverzeichnis
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.
Details: caniuse.com
Erlaubt sind dabei folgende Angaben:
-
auto, der Browser entscheidet, ob der Inhalt des Elements mit oder ohne Scrollbalken dargestellt wird. -
scroll, Inhalte sind per Scrollbalken erreichbar -
visible, Inhalte sind sichtbar und ragen bei Bedarf über die Grenzen des Elements hinaus -
hidden, Nur die Inhalte sind sichtbar, die sich innerhalb des Anzeigebereichs des Elements befinden. Was darüber hinausragt, wird abgeschnitten.
Achtung!
no-display und no-content waren einmal Teil der CSS3 Spec, sind aber 2018 entfernt worden. Eine Browser-Unterstützung hat es nie gegeben. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style>
...
#eins { overflow: auto; }
#zwei { overflow: scroll; }
#drei { overflow: visible; }
#vier { overflow: hidden; }
</style>
</head>
<body>
<h1>übergroße Inhalte</h1>
<h2>Darstellung ohne overflow</h2>
<p>
<img src="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="Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
...
</body>
</html>
html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.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; }
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.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.
Details: caniuse.com
Erlaubt sind dabei folgende Angaben:
-
auto, der Browser entscheidet, ob für die Darstellung des Elementinhalts ein horizontaler Scrollbalken bereitgestellt wird. -
scroll, Inhalte sind per Scrollbalken erreichbar -
visible, Inhalte sind sichtbar und ragen bei Bedarf horizontal über die Grenzen des Elements hinaus -
hidden, Nur die Inhalte sind sichtbar, die sich innerhalb des Anzeigebereichs des Elements befinden. Was in Leserichtung darüber hinausragt, wird abgeschnitten.
...
#eins { overflow-x: auto; }
#zwei { overflow-x: scroll; }
#drei { overflow-x: visible; }
#vier { overflow-x: hidden; }
</style>
</head>
<body>
<h1>übergroße Inhalte</h1>
<h2>Darstellung ohne overflow</h2>
<p>
<img src="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="Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
...
html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.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.
Details: caniuse.com
Erlaubt sind dabei folgende Angaben:
-
auto, der Browser entscheidet, ob für die Darstellung des Elementinhalts ein vertikaler Scrollbalken bereitgestellt wird. -
scroll, Inhalte sind per Scrollbalken erreichbar -
visible, Inhalte sind sichtbar und ragen bei Bedarf vertikal über die Grenzen des Elements hinaus -
hidden, Nur die Inhalte sind sichtbar, die sich innerhalb des Anzeigebereichs des Elements befinden. Was in Leserichtung darüber hinausragt, wird abgeschnitten.
...
#eins { overflow-y: auto; }
#zwei { overflow-y: scroll; }
#drei { overflow-y: visible; }
#vier { overflow-y: hidden; }
</style>
</head>
<body>
<h1>übergroße Inhalte</h1>
<h2>Darstellung ohne overflow</h2>
<p>
<img src="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="Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
...
html bzw. body wird die Angabe overflow:visible als overflow:auto 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]
- text-overflow
- Referenz: overflow
