overflow

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Mit der Eigenschaft overflow wird beschrieben, wie der Browser Elemente behandelt, die im Verhältnis zu den Elementen, in denen sie angezeigt werden, zu groß sind. In der Praxis kann dieser Fall eintreten, wenn eine feste bzw. maximale Höhe oder Breite für ein übergeordnetes Element festgelegt ist.

Wird overflow auf ein Element angewandt, dessen Inhalt beschnitten wird, wird die Layoutgröße des Elements ebenfalls beschnitten. Verzierungen wie Rahmen o. Ä. werden dem Element erst nach dem Beschneiden zugewiesen. Hier liegt ein deutlicher Unterschied zur clip-Eigenschaft vor, die nur Einfluss auf den sichtbaren Bereich eines Elements hat und Rahmen und andere Verzierungen zusammen mit dem Inhalt beschneidet.

Vererbt: nein

Siehe auch: clip, height, text-overflow, max-width, max-height, width

Werte

Eine der folgenden Konstanten:

• auto: Diese Einstellung zeigt bei überfließendem Inhalt Scroll-Balken an, damit auch der überfließende Inhalt für den Benutzer sichtbar gemacht wird. Die Scroll-Balken nehmen dabei wiederum selbst Platz im Inhaltsbereich des Elements ein und verkleinern somit die sichtbare Fläche. Die Größe von Scroll-Balken ist von Browser zu Browser unterschiedlich.
• hidden: Diese Einstellung blendet überfließenden Inhalt aus.
• scroll: Diese Einstellung verhält sich wie die Konstante auto, der horizontale und vertikale Scroll-Balken werden jedoch auch dann angezeigt, wenn sie nicht benötigt werden.
• visible: Diese Einstellung lässt es zu, dass überfließender Inhalt außerhalb der sichtbaren Box des betreffenden Elements (inklusive Hintergrund und Rahmen) angezeigt wird.

Standardwert: visible

Kompatibilität

CSS-Version: 2

Funktioniert in allen CSS-fähigen Browsern, mit Ausnahme von Netscape 4. Hier wird immer die Höhe eines Elements an den Bedarf des Inhalts angepasst.

Der Internet Explorer für Windows (bis Version 6) passt mit der Einstellung visible fälschlicherweise die Box des betreffenden Elements an den überfließenden Inhalt an, anstatt diesen außerhalb der Box-Begrenzung anzuzeigen.

Der Internet Explorer 4 für Macintosh unterstützt keine Scroll-Balken bei den Einstellungen auto und scroll.

Beispiel

Folgende Stilregel weist dem Element mit der ID hauptmenue eine feste Höhe und Breite zu und erzeugt Scroll-Balken, wenn es zu überfließendem Inhalt kommt: