05.06.2009
Scrollbare Div's: Wenig Platz, viel Inhalt
Manche sind es noch von den Iframes gewohnt, dass man den Inhalt eines bestimmten Seitenbereichs scrollen kann.
Dieser Effekt lässt sich auch ganz einfach per CSS für Div-Container bzw. für Blockelemente allgemein erreichen.
Das entsprechende Element bekommt hierzu lediglich eine fixe Höhe und einen gewünschten Breitenwert zugewiesen. Die Eigenschaft overflow: auto; sorgt dafür, dass sich überschüssiger Inhalt scrollen lässt, wie folgendes Beispiel zeigt:
Darstellung bei wenig Inhalt
Wenig Inhalt,
Platz reicht aus,
kein Scrollbalken.
Darstellung bei zu viel Inhalt
Bei zu viel Inhalt reicht der Platz nicht aus.
Die meisten Browser bieten für diesen Fall eine Scrollbar an, mit der sich der Inhalt scrollen lässt.
Umgesetzt wurden diese "Scroll-Div's" mit folgendem HTML-Code:
<div class="auto">
...Inhalt...
</div>
Formatierung per CSS:
.auto {
background: #00BFFF;
height: 150px;
overflow: auto;
width: 200px;
border: 1px solid #000;
padding: 10px;
}
Mit der Eigenschaft overflow: auto entscheiden die jeweiligen Browser wie sie sich bei überschüssigem Inhalt verhalten. In den meisten Fällen wird dann eine Scrollbar generiert.
Um sicher zu gehen, dass diese auch tatsächlich angeboten wird, kann man die Eigenschaft overflow: auto durch overflow: scroll ersetzen:
HTML:
<div class="scroll">
...Inhalt...
</div>
CSS:
.scroll {
background: #ff8e00;
height: 150px;
overflow: scroll;
width: 200px;
border: 1px solid #000;
padding: 10px;
}
Das Ergebnis sieht dann so aus:
Darstellung bei wenig Inhalt
Trotz genügend Platz werden Scrollbalken "vorgemerkt".
Darstellung bei viel Inhalt
Bei zu viel Inhalt reicht der Platz nicht aus.
Die bereits vorgesehenen Scrollbalken werden bei Bedarf "aktiv" und man kann sie benutzen.
Rein optisch ist diese Variante nicht so schön anzusehen, weil die Scrollbalken auch eingeblendet werden, wenn sie bei ausreichender Div-Größe überhaupt nicht benötigt werden. Außerdem erscheint dabei zusätzlich auch noch ein horizontaler Scrollbalken, der meist überhaupt nicht benötigt wird.
Bleibt noch zu beachten, dass die Scrollbar selbst eine Breite von ca. 16px hat und sich um diesen Wert dann die Breite des Inhaltsbereichs verringert.