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 war früher overflow:hidden für Gestaltung mehrspaltiger Layouts verwendbar.

Durch Setzen der overflow Eigenschaft auf einen anderen Wert als visible wird ein neuer Blockformatierungskontext erzeugt.

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.

  • IE
  • Firefox
  • Safari
  • Chrome
  • Opera

Details: caniuse.com

Erlaubt sind dabei folgende Angaben:

  • auto, der Browser entscheidet, ob der Inhalt des Elements mit oder ohne Scrollbalken dargestellt wird.
  • scroll, Inhalte sind per Scrollbalken erreichbar
  • visible, Inhalte sind sichtbar und ragen bei Bedarf über die Grenzen des Elements hinaus
  • hidden, Nur die Inhalte sind sichtbar, die sich innerhalb des Anzeigebereichs des Elements befinden. Was darüber hinausragt, wird abgeschnitten.

Achtung!

Die Werte no-display und no-content waren einmal Teil der CSS3 Spec, sind aber 2018 entfernt worden. Eine Browser-Unterstützung hat es nie gegeben.
--->
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; }
    </style>
  </head>
  <body>
    <h1>übergroße Inhalte</h1>
    <h2>Darstellung ohne overflow</h2>
    <p>
      <img src="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="Selfhtml-logo.gif" alt="SELFHTML-Logo">
      </p>
    </figure>
    ...
  </body>
</html>
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

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

Beispiel
p { overflow:   hidden visible; }
p { overflow-x: hidden;
    overflow-y: visible; }
Beide Deklarationsblöcke bewirken dasselbe.
Beachten Sie: Wenn Sie für overflow-x einen Wert festlegen, wird automatisch der Wert für overflow-y auf auto anstelle des Standardwerts visible gesetzt. Dies führt zu einer leichten vertikalen Verschiebung der nachfolgenden Elemente.

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

Details: caniuse.com

Erlaubt sind dabei folgende Angaben:

  • auto, der Browser entscheidet, ob für die Darstellung des Elementinhalts ein horizontaler Scrollbalken bereitgestellt wird.
  • scroll, Inhalte sind per Scrollbalken erreichbar
  • visible, Inhalte sind sichtbar und ragen bei Bedarf horizontal über die Grenzen des Elements hinaus
  • hidden, Nur die Inhalte sind sichtbar, die sich innerhalb des Anzeigebereichs des Elements befinden. Was in Leserichtung darüber hinausragt, wird abgeschnitten.
Beispiel ansehen …
      ...
      #eins  { overflow-x: auto; }
      #zwei  { overflow-x: scroll; }
      #drei  { overflow-x: visible; }
      #vier  { overflow-x: hidden; }
    </style>
  </head>
  <body>
    <h1>übergroße Inhalte</h1>
    <h2>Darstellung ohne overflow</h2>
    <p>
      <img src="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="Selfhtml-logo.gif" alt="SELFHTML-Logo">
      </p>
    </figure>
    ...
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

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

Details: caniuse.com

Erlaubt sind dabei folgende Angaben:

  • auto, der Browser entscheidet, ob für die Darstellung des Elementinhalts ein vertikaler Scrollbalken bereitgestellt wird.
  • scroll, Inhalte sind per Scrollbalken erreichbar
  • visible, Inhalte sind sichtbar und ragen bei Bedarf vertikal über die Grenzen des Elements hinaus
  • hidden, Nur die Inhalte sind sichtbar, die sich innerhalb des Anzeigebereichs des Elements befinden. Was in Leserichtung darüber hinausragt, wird abgeschnitten.
Beispiel ansehen …
</source>
      ...
      #eins  { overflow-y: auto; }
      #zwei  { overflow-y: scroll; }
      #drei  { overflow-y: visible; }
      #vier  { overflow-y: hidden; }
    </style>
  </head>
  <body>
    <h1>übergroße Inhalte</h1>
    <h2>Darstellung ohne overflow</h2>
    <p>
      <img src="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="Selfhtml-logo.gif" alt="SELFHTML-Logo">
      </p>
    </figure>
    ...
Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto 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 (Juli 2019) unterstützen die Browser diese Eigenschaft noch nicht.

Siehe auch[Bearbeiten]