Wie kann ich meinem Div automatisch eine vertikale Bildlaufleiste hinzufügen?

Ein Div-Behälter in HTML kann mehrere Elemente und Unterelemente haben und eine bestimmte Größe haben. Manchmal müssen also eine Bildlaufleiste mit dem Div -Behälter hinzugefügt werden, wenn die Elemente die Größengrenze des DIV überschreiten oder wenn sie nicht richtig in den DIV -Behälter passen.

In diesem Artikel wird die nützliche Methode zum Hinzufügen einer vertikalen Bildlaufleiste zum Div mithilfe des HTML und des CSS erörtert.

So fügen Sie der Div eine vertikale Scrollbar hinzu?

Die Entwickler können dem Div vertikale Scrollbars hinzufügen, indem sie die “anwenden“Überlauf-y: ScrollenEigentum zusammen mit einigen anderen CSS -Eigenschaften auf dem DIV -Containerelement.

Beispiel

Lassen Sie uns dies mit einem einfachen Beispiel verstehen, indem Sie zuerst eine "erstellen"div"Behälter mit einigen HTML -Elementen darin und dann das CSS anwenden"ÜberlaufEigenschaft zum Hinzufügen einer vertikalen Bildlaufleiste mit der DIV:

Das Folgende sind einige berühmte Front-End- und Back-End
Sprachen:

Python

JavaScript

Java

Php

C#

Gehen

Schnell

Rubin

Matlab

Typoskript

Scala

Html

CSS

Rost

Perl

Sql

R

NoSql

C

C++

Im obigen Code -Snippet:

• A ""Element wurde mit einer Klasse hinzugefügt, die als" als "deklariert als" hinzugefügt wurdeScrollleiste”.
• Der "Container enthält eine Liste von zwanzig Front-End- und Back-End-Sprachen.

Jetzt ist es erforderlich, die CSS -Eigenschaften auf die DIV anzuwenden, indem der Klassenauswahl hinzugefügt wird:

.Scrollleiste

Überlauf-y: Scroll;
Max-Höhe: 200px;
Max-Breite: 300px;
Text-Align: Mitte;
Hintergrundfarbe: Azure;

Im obigen CSS -Code -Snippet:

• Der "Überlauf-y”Eigenschaft mit dem Wert“scrollen”Wird hinzugefügt, um eine vertikale Bildlaufleiste für die DIV zu erstellen.
• Danach das "maximale Höhe"Des DIV -Behälters wurde als" definiert als "200px" und das "maximale Breite"Wurde als" definiert "300px”.
• Der Wert der “Textausrichtung"Eigenschaft wird als" festgelegt "CenterUm die Gegenstände im Div auf die Mitte auszurichten. Dies geschieht nur, um eine bessere Präsentation des Div -Containers zu machen.
• Die Hintergrundfarbe für das DIV wurde als "definiert als"azurblauDas wird das Erscheinungsbild des Div -Behälters vom Rest des Bildschirms unterscheiden.

Infolgedessen wird der Div -Container erstellt und hat auf der rechten Seite eine vertikale Bildlaufleiste:

So können wir einem Div automatisch eine vertikale Bildlaufleiste hinzufügen.

Abschluss

Die vertikale Scrollbar kann einem Div automatisch durch eine ID oder einen Klassenauswahl im CSS -Stil auf das DIV -Element hinzugefügt werden und dann das „anwenden“ das „anwenden“Überlauf-y: ScrollenEigentum zum Divelelement. Die Parameter der Bildlaufleiste werden gemäß den anderen hinzugefügten Eigenschaften wie möglich angezeigtmaximale Höhe" Und "maximale Breite”Des Div -Behälters. Dieser Blog ist eine informative Anleitung zur Methode zum Hinzufügen einer vertikalen Bildlaufleiste zu einer DIV.