Ü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