Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Dieoverflow-yCSS-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 deroverflow Kurzschreibweise festgelegt werden.
Probieren Sie es aus
overflow-y: visible;overflow-y: hidden;overflow-y: clip;overflow-y: scroll;overflow-y: auto;<section> <p> 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
/* 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;Dieoverflow-y Eigenschaft wird als einzelner<overflow> Schlüsselwortwert angegeben.
Wennoverflow-x aufhidden,scroll oderauto gesetzt ist und dieoverflow-y Eigenschaft aufvisible (Standard) gesetzt ist, wird der Wert implizit alsauto 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 keineScroll-Container.
hiddenÜberlaufender Inhalt wird, falls erforderlich, vertikal innerhalb des Innenabstandsrahmens des Elements abgeschnitten. Es werden keine Scrollleisten bereitgestellt.
clipÜberlaufender Inhalt wird an deroverflow clip edge des Elements abgeschnitten, die mit der
overflow-clip-marginEigenschaft definiert ist. Dadurch überläuft der Inhalt den Innenabstandsrahmen des Elements um den<length>Wert vonoverflow-clip-marginoder um0px, falls nicht festgelegt. Der Unterschied zwischenclipundhiddenbesteht darin, dass dasclipSchlüsselwort auch das Scrollen verbietet, einschließlich programmatischem Scrollen. Es wird kein neues Formatierungskontext erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sieoverflow: clipzusammen mitdisplay: 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
scrollzeigen Benutzeragenten Scrollleistennur 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 beivisible, aber es wird trotzdem ein neuer Block-Formatierungskontext erstellt.
Hinweis:Der Schlüsselwortwertoverlay ist ein veraltetes Alias fürauto. Beioverlay 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 withvisible/clip computing toauto/hidden respectively if one ofoverflow-x oroverflow-y is neithervisible nor clip |
| Animationstyp | diskret |
Formale Syntax
overflow-y =
visible|
hidden|
clip|
scroll|
auto
Beispiele
Verhalten von overflow-y festlegen
HTML
<ul> <li> <code>overflow-y:hidden</code> — hides the text outside the box <div> 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> 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> 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> 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
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 |