Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich ein vertikal scrollbares Div nur mit CSS?

Wie erstelle ich ein vertikal scrollbares Div nur mit CSS?

Patricia Arquette
Freigeben: 2024-12-13 06:19:10
Original
751 Leute haben es durchsucht

How Do I Create a Vertically Scrollable Div Using Only CSS?

Vertikale Scrollbarkeit in einem Div mit CSS erstellen

Problem:

Ein Div-Elementsatz mit Überlauf: scroll ermöglicht horizontales und vertikales Scrollen. Wie können wir das Scrollen nur auf die vertikale Richtung beschränken?

Lösung:

Um ein Div mithilfe von CSS vertikal scrollbar zu machen, geben Sie die Eigenschaft „overflow“ zusammen mit „overflow-y“ an oder Überlauf-x.

Arten von Überlauf Eigenschaften:

  • auto: Erstellt Bildlaufleisten, wenn der Inhalt die definierte Höhe oder Breite überschreitet.
  • scrollen: Erzwingt Bildlaufleisten unabhängig von der Inhaltsgröße erscheinen.

Spezifische Verwendung Fälle:

Vertikale Bildlaufleiste immer anzeigen:

overflow-y: scroll;
Nach dem Login kopieren

Dies erzwingt die Anzeige einer vertikalen Bildlaufleiste, auch wenn der Inhalt die angegebene Höhe nicht überschreitet.

Vertikale Bildlaufleiste nur anzeigen, wenn Erforderlich:

overflow: auto;
Nach dem Login kopieren

Dies ermöglicht vertikales Scrollen nur, wenn der Inhalt die angegebene Höhe überschreitet. Wenn der Inhalt in die Höhe passt, wird keine Bildlaufleiste angezeigt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein vertikal scrollbares Div nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage