Hier bist Du: Home « Positionieren « overflow

Übergroßer Inhalt: overflow

Legt fest, wie ein Bereich oder ein Element, der innerhalb eines anderen Elements definiert wird, angezeigt werden soll, wenn der Inhalt des inneren Elements zu groß ist. Wenn z.B. ein Bereich innerhalb eines <DIV>-Bereichs festgelegt wird und dieser größer ist, als die Abmessungen des <DIV>-Bereichs oder durch eine Positionierung über den Rand läuft.

Code-Beispiel für overflow:

<style type="text/css">
 .examplediv
 {
  background-color:#efefef;
  border-style:solid #000000 1px;
 }
#divid
{
 position:absolute;
 left:450px; top:350px; width:300px; height:150px;
 overflow:scroll;
}
</style>

<body>

  <div id="divid" class="examplediv">
  ...
  </div>

Beispiel ansehen

Initialwert:visible
Vererbbar:Nein
Anwendbar auf: Block-Elemente *
Medium:Visual
Werte:
visible
Der übergroße Inhalt wird angezeigt. Das übergeordnete Element wird in seiner Größe nicht verändert. Der Inhalt läuft über den Rand.
hidden
Der übergroße Inhalt wird abgeschnitten und nicht angezeigt.
scroll
Der übergroße Inhalt wird abgeschnitten. Das übergeordnete Element wird mit Scrollbalken angezeigt, um den Inhalt zu scrollen.
auto
Die Einstellung ist Browserabhängig, sollte aber scroll sein.
Inherit
Bemerkung: Bei visible vergrößert der IE das übergeordnete Element, bis der Inhalt passt.

Anmerkung: Die Anwendbarkeit von overflow wurde im Entwurf zu CSS 2.1 auf Tabellenzellen (unterstützt momentan keiner der Browser) und inline-block erweitert.

Wert Internet Explorer Opera Netscape Mozilla/ Seamonkey Mozilla Firefox Safari Konqueror
5 5.5 6 7 MAC 5+ 5 6 7+ 4 6 7+ 1+ 0.8+ 1.0+ 3.3+
visible f f f j f j j j n j j j j j j
hidden j j j j j j j j n j j j j j j
scroll j j j j j n n j n j j j j j j
auto j j j j j n n j n j j j j j j