overflow-y

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die overflow-y CSS-Eigenschaft legt fest, was angezeigt wird, wenn Inhalt die oberen und unteren Ränder eines Block-Level-Elements überläuft. Dies kann nichts, eine Scrollleiste oder der überlaufende Inhalt sein. Diese Eigenschaft kann auch mit der overflow Kurzschreibweise festgelegt werden.

Probieren Sie es aus

overflow-y: visible;

overflow-y: hidden;

overflow-y: clip;

overflow-y: scroll;

overflow-y: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Syntax

css

/* Keyword values */
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;

/* Global values */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;

Die overflow-y Eigenschaft wird als einzelner <overflow> Schlüsselwortwert angegeben.

Wenn overflow-x auf hidden, scroll oder auto gesetzt ist und die overflow-y Eigenschaft auf visible (Standard) gesetzt ist, wird der Wert implizit als auto berechnet.

Werte

visible: Überlaufender Inhalt wird nicht abgeschnitten und kann sich außerhalb des Innenabstandsrahmens des Elements an den oberen und unteren Rändern befinden. Das Element ist keine Scroll-Container.
hidden: Überlaufender Inhalt wird, falls erforderlich, vertikal innerhalb des Innenabstandsrahmens des Elements abgeschnitten. Es werden keine Scrollleisten bereitgestellt.
clip: Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die mit der overflow-clip-margin Eigenschaft definiert ist. Dadurch überläuft der Inhalt den Innenabstandsrahmen des Elements um den <length> Wert von overflow-clip-margin oder um 0px, falls nicht festgelegt. Der Unterschied zwischen clip und hidden besteht darin, dass das clip Schlüsselwort auch das Scrollen verbietet, einschließlich programmatischem Scrollen. Es wird kein neues Formatierungskontext erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sie overflow: clip zusammen mit display: flow-root. Das Element ist keine Scroll-Container.
scroll: Überlaufender Inhalt wird, falls erforderlich, vertikal innerhalb des Innenabstandsrahmens des Elements abgeschnitten. Browser zeigen Scrollleisten in vertikaler Richtung an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird, oder nicht. (Dies verhindert, dass Scrollleisten bei Inhaltsänderungen erscheinen oder verschwinden.) Drucker können dennoch überlaufenden Inhalt drucken.
auto: Überlaufender Inhalt wird am Innenabstandsrahmen des Elements abgeschnitten, und überlaufender Inhalt kann in Ansicht gescrollt werden. Im Gegensatz zu scroll zeigen Benutzeragenten Scrollleisten nur dann an, wenn der Inhalt überläuft, und blenden Scrollleisten standardmäßig aus. Wenn der Inhalt innerhalb des Innenabstandsrahmens des Elements passt, sieht es genauso aus wie bei visible, aber es wird trotzdem ein neuer Block-Formatierungskontext erstellt.

Hinweis: Der Schlüsselwortwert overlay ist ein veraltetes Alias für auto. Bei overlay werden die Scrollleisten über dem Inhalt gezeichnet, anstatt Platz einzunehmen.

Formale Definition

Anfangswert	`visible`
Anwendbar auf	Block-containers, flex containers, and grid containers
Vererbt	Nein
Berechneter Wert	as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
Animationstyp	diskret

Formale Syntax

overflow-y = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

Beispiele

Verhalten von overflow-y festlegen

HTML

html

<ul>
  <li>
    <code>overflow-y:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code> — displays the text outside the box if
    needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code> — equivalent to <code>scroll</code>
    on most browsers
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

css

div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}

Ergebnis

Spezifikationen

Specification
CSS Overflow Module Level 3 # overflow-properties

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden