CSS/Eigenschaften/Anzeige/overflow

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Normalerweise sollte die Größe eines Elements so gewählt sein, dass der anzuzeigende Inhalt sichtbar dargestellt wird. Alle Browser stellen ohne weitere Angaben die Elemente auch entsprechend dar. Wenn der Viewport nicht ausreicht, werden Scrollleisten eingeblendet.

Die Eigenschaft overflow ermöglicht es, Inhalte größer als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Damit die Inhalte trotzdem erreichbar sind, können Sie bestimmen, ob Scrollbalken erscheinen sollen. Zudem ist overflow:hidden für Gestaltung mehrspaltiger Layouts verwendbar.

overflow-x[Bearbeiten]

Mit overflow-x lässt sich angeben, wie übergroßer Inhalt hinsichtlich der Breite des Elements behandelt wird. Diese Eigenschaft war ursprünglich eine proprietäre Eigenschaft des Internet Explorers.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>overflow-x</title>
    <style>
      ...
      #eins  { overflow-x: auto; }
      #zwei  { overflow-x: scroll; }
      #drei  { overflow-x: visible; }
      #vier  { overflow-x: hidden; }
      #fuenf { overflow-x: no-display; }
      #sechs { overflow-x: no-content; }
    </style>
  </head>
  <body>
    <h1>übergroße Inhalte</h1>
    <h2>Darstellung ohne overflow</h2>
    <p>
      <img src="http://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
    </p>
    <h2>Darstellung mit ausreichender Höhe und allen Varianten für <code>overflow-x</code></h2>
    <figure>
      <figcaption>overflow-x: auto;</figcaption>
      <p id="eins">
        <img src="http://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
      </p>
    </figure>
    ...
  </body>
</html>

Sie können bestimmen, wie sich der Inhalt eines Elements verhält, wenn die zur Verfügung stehende Breite nicht ausreichend ist. Erlaubt sind dabei folgende Angaben:

  • auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung
  • scroll, Inhalte sind per Scrollbalken erreichbar
  • visible, Inhalte sind sichtbar
  • hidden, Inhalte sind unsichtbar
  • no-display, das Element wird entfernt, so als ob display:none gesetzt wäre
  • no-content, der Inhalt wird nicht angezeigt, so als ob visibility:hidden gesetzt wäre
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

Achtung!

Die Werte no-display und no-content werden gegenwärtig (Mai 2015) von den Browsern nicht unterstützt.

overflow-y[Bearbeiten]

Mit overflow-y lässt sich angeben, wie übergroßer Inhalt hinsichtlich der Höhe des Elements behandelt wird. Diese Eigenschaft war ursprünglich eine proprietäre Eigenschaft des Internet Explorers.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>overflow-y</title>
    <style>
      ...
      #eins  { overflow-y: auto; }
      #zwei  { overflow-y: scroll; }
      #drei  { overflow-y: visible; }
      #vier  { overflow-y: hidden; }
      #fuenf { overflow-y: no-display; }
      #sechs { overflow-y: no-content; }
    </style>
  </head>
  <body>
    <h1>übergroße Inhalte</h1>
    <h2>Darstellung ohne overflow</h2>
    <p>
      <img src="http://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
    </p>
    <h2>Darstellung mit ausreichender Breite und allen Varianten für <code>overflow-y</code></h2>
    <figure>
      <figcaption>overflow-y: auto;</figcaption>
      <p id="eins">
	<img src="http://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
      </p>
    </figure>
    ...
  </body>
</html>

Sie können bestimmen, wie sich der Inhalt eines Elements verhält, wenn die zur Verfügung stehende Höhe nicht ausreichend ist. Erlaubt sind dabei folgende Angaben:

  • auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung
  • scroll, Inhalte sind per Scrollbalken erreichbar
  • visible, Inhalte sind sichtbar
  • hidden, Inhalte sind unsichtbar
  • no-display, das Element wird entfernt, so als ob display:none gesetzt wäre
  • no-content, der Inhalt wird nicht angezeigt, so als ob visibility:hidden gesetzt wäre
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

Achtung!

Die Werte no-display und no-content werden gegenwärtig (Mai 2015) von den Browsern nicht unterstützt.

overflow[Bearbeiten]

Mit der Eigenschaft overflow lässt sich angeben, wie der Inhalt eines Elements dargestellt werden soll, wenn dieser größer als der Anzeigebereich ist.

  • CSS 2.0
  • IE
  • Firefox
  • Safari
  • Chrome
  • Opera
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>overflow</title>
    <style>
      ...
      #eins  { overflow: auto; }
      #zwei  { overflow: scroll; }
      #drei  { overflow: visible; }
      #vier  { overflow: hidden; }
      #fuenf { overflow: no-display; }
      #sechs { overflow: no-content; }
    </style>
  </head>
  <body>
    <h1>übergroße Inhalte</h1>
    <h2>Darstellung ohne overflow</h2>
    <p>
      <img src="http://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
    </p>
    <h2>Darstellung mit allen Varianten für <code>overflow</code></h2>
    <figure>
      <figcaption>overflow: auto;</figcaption>
      <p id="eins">
        <img src="http://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
      </p>
    </figure>
    ...
  </body>
</html>

Sie können bestimmen, wie sich der Inhalt eines Elements verhält, wenn der zur Verfügung stehende Platz nicht ausreichend ist. Erlaubt sind dabei folgende Angaben:

  • auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung
  • scroll, Inhalte sind per Scrollbalken erreichbar
  • visible, Inhalte sind sichtbar
  • hidden, Inhalte sind unsichtbar
  • no-display, das Element wird entfernt, so als ob display:none gesetzt wäre
  • no-content, der Inhalt wird nicht angezeigt, so als ob visibility:hidden gesetzt wäre
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

Achtung!

Die Werte no-display und no-content werden gegenwärtig (Mai 2014) von den Browsern nicht unterstützt.

Mit CSS3 wird das Konzept von overflow erweitert. overflow ist jetzt eine Zusammenfassung der Einzeleigenschaften overflow-x und overflow-y.

  • CSS 3.0
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
Beispiel
p { overflow:   hidden visible; }
p { overflow-x: hidden;
    overflow-y: visible; }
Beide Deklarationsblöcke bewirken dasselbe.

Hinweis

Die Diskussion dazu ist noch nicht abgeschlossen. Denkbar wäre auch eine zusammenfassende Eigenschaft für overflow-x, overflow-y und overflow-style.

Achtung!

Derzeit (Mai 2014) wird overflow nicht als zusammenfassende Eigenschaft interpretiert.

overflow-style[Bearbeiten]

Mit der Eigenschaft overflow-style wird es möglich sein, die Art des Scrollens festzulegen um den über den Anzeigebereich hinausragenden Inhalt des Elements zu erreichen.

  • CSS 3.0
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
Beispiel

Sie können bestimmen auf welche Weise der überfließende Inhalt erreicht werden soll. Erlaubt sind die Angaben:

  • scroll, Scrollbalken
  • panner, kleines Rechteck in einem großen, bekannt von Digitalkameras
  • move, direkt mit der Maus bewegbar
  • marquee, automatische Bewegung

Achtung!

Derzeit (Mai 2015) unterstützen die Browser diese Eigenschaft noch nicht.

siehe auch[Bearbeiten]