Wenn der Inhalt überfließt
Wenn für ein Element keine Höhe oder Beite angegeben ist, legt der Inhalt Höhe und Breite fest. Die Höhe eines Blocks wächst mit dem Text und Bildern.
Ist für einen Block keine Höhe angegeben, dann dehnt der Inhalt die Höhe, bis er passt. Damit das Layout durch unvorhersehbare Inhalte nicht bricht, wird der umfassende Block durch overflow: hidden begrenzt.
Die abgeschnittenen Teile des Elements werden versteckt oder dem Benutzer werden Scrollleisten angeboten, die den verborgenen Inhalt sichtbar machen.
#gallery {
display: flex;
max-width: 600px;
overflow: hidden;
}
oder in diesem Beispiel einer scrollenden Galerie
#gallery {
display: flex;
overflow-x: scroll;
max-width: 600px;
margin: auto;
}
overflow-x, overflow-y
Die einfache Eigenschaft overflow kann weiter detailliert werden.
- overflow-x
- gibt an, ob überbreiter Inhalt beschnitten werden und entweder nicht angezeigt oder nur durch Scrollen angezeigt werden soll.
- overflow-y
- beschneidet überlangen Inhalt und zeigt den Überstand gar nicht oder nur beim Scrollen.
Inzwischen ist die Scrollleiste oder der Rollbalken (Mac OS-Terminologie) mit CSS scrollbar eine flexible Lösung für ein individuelles Design. Für Mac OS ist sie schon fast unersetzlich, denn in den neueren Version zeigt Mac OS Scrollleisten erst an, wenn der Besucher die Scrollmöglichkeit schon selber entdeckt hat.
CSS overflow:hidden, overflow: scroll
Die Scrollleisten sind in vielen Browsern nicht sichtbar – zumindest nicht dauerhaft. Wenn es wichtig ist, muss dem Benutzer die Existenz der Scrollleisten ausdrücklich bekannt gemacht werden. Tabellen sind da keine Ausnahme: Da zeigen die Browser nicht zuverläßig, dass dort noch ein Teil der Tabelle verborgen ist.
Beispiel aus Responsive Tabellen
| Art. Nr. | Beschreibung | Bereitstellung | VE | Preis in €/VE 1 VE ab 10 VE |
||
|---|---|---|---|---|---|---|
| VC0800050 | 0,7ml Klarglas, flacher Boden 40 x 7mm |
Mittwochs | 1000 | 15,10 € | 13,50 € |  |
| VC0801050 | 0,7ml Braunglas, flacher Boden 40 x 7mm |
ab 2. Quartal 2023 | 1000 | 15,90 € | 14,50 € | |
| VC0800735 | 0,3ml Klarglas, runder Boden 31,5 x 5,5mm |
ganzjährig | 2500 | 17,00 € | 14,00 € |  |
| VC0800730 | 0,3ml Klarglas, konisch 31,5 x 5,5mm |
Montags und Mittwochs | 3000 | 16,60 € | 13,80 € | |
.wrapper {
width: 80%;
overflow: scroll;
}
Die Inhalte werden von der oberen linke Ecke aus angezeigt und nach links abgeschnitten.
- overflow
- overflow bestimmt, ob ein übergroßer Inhalt innerhalb eines Elements beschnitten oder sichtbar sein soll.
- Werte
- auto | hidden | scroll | visible | inherit
auto veranlasst den Browser, Scrollbalken anzubieten, damit der Benutzer den Rest des Elements betrachten kann.
hidden gibt vor, dass nur der beschnittene Teil des übergroßen Elements sichtbar ist, so dass es vollkommen innerhalb des umfassenden Containers dargestellt wird und keine Scrollbalken eingespielt werden.
scroll führt dazu, dass ein übergroßes Element beschnitten wird und Scrollbalken eingespielt werden, über die der Rest des Elements betrachtet werden kann.
visible ist die Vorgabe und erzwingt, dass ein übergroßes Element nicht beschnitten wird. Das vollständige Element wird dargestellt, obwohl es sich über die Grenzen des umfassenden Blocks hinaus erstreckt. Wenn overflow:visible eingesetzt wird, hat die CSS-Eigenschaft clip keine Auswirkung auf die Darstellung des Elements.
overflow Beispiele
Während Tabellen pflichtbewußt mit einer Scrollleiste darauf hinweisen, dass hier mehr zu holen ist, weisen andere Elemente auch bei overflow: scroll nicht auf den möglichen Überfluss hin.
Beispiele mit
- overflow: scroll;
- overflow: hidden;
- overflow: visible;
<div style="overflow: scroll; height: 200px; width: 180px; …"> <img src="bild.gif" … /> <p>Aliquam tempus ipsum … </p> </div>
Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.
Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est.
Und wieder: Bei overflow : scroll muss dem Benutzer die Scroll-Möglichkeit klar gemacht werden, sonst entgeht ihm der weitere Inhalt schnell.
