Webentwickler verwenden HTML -Komponenten wie Header und Fußzeilen, NAV, Div, Image und viele andere, um eine Webseite zu teilen und Inhalte einzubetten. Genauer gesagt das “Element ist eine beliebte HTML -Komponente, die eine einfache Möglichkeit bietet, eine Seite in Abschnitte zu unterteilen. Einige Benutzer möchten die „“ Komponenten vertikal oder horizontal scrollbar machen, um den Webseitenraum zu erhalten.

Dieser Beitrag zeigt die Methode, um ein vertikal scrollierbares Div durch CSS zu erstellen.

Wie man mit CSS ein vertikal scrollierbares Div -Scrollen erstellt/erstellt?

Befolgen Sie die angegebenen Anweisungen, um ein vertikal scrollierbares Div mithilfe von CSS zu erstellen, indem CSS verwendet wird.

Schritt 1: Überschrift hinzufügen

Zuallererst fügen Sie eine "hinzu"”Tag zum Hinzufügen von Daten in der Mitte der Seite. Stecken Sie dann die Überschrift mit der Verwendung des “

" Schild.

Schritt 2: Erstellen Sie einen DIV -Behälter in HTML

Danach erstellen Sie eine “"Container und zuweisen Sie die namens Klasse"scroll-div”. Fügen Sie danach einen Text oder einen Absatz zwischen den Tags hinzu:

LinuxHint -Website

LinuxHint ist eine beliebte Website für die Erstellung von Inhalten. Es hat viele Produkte aufgebaut, mit denen Sie Linux, Programmierung, Informatik und mehr kennenlernen können. Diese Plattform bietet Arbeiten an verschiedenen Kategorien, einschließlich HTML/CSS, JavaScript, Git, Windows, Dockers, Discord und vielen anderen. Es bietet eine vollständige Anleitung zu diesen Kategorien. Benutzer finden jedes Thema, das sich auf die genannte Kategorie bezieht. In dieser Situation, wenn Sie Anfänger sind, können Sie sich auf Richtlinien zum Schreiben eines Artikels beziehen.

Ausgang

Schritt 3: Stilüberschrift

Greifen Sie auf das Überschriftenelement zu, indem Sie den Tag -Namen zwischen den Tags angeben. Dann wenden Sie die “an“FarbeEigenschaft, um die Überschriftenfarbe einzustellen:

H1
Farbe: RGB (81, 173, 226);

Es kann beobachtet werden, dass die Überschriftenfarbe geändert wurde:

Schritt 4: Divrollbar machen

Verwenden Sie als nächstes die “.scroll-divKlasse, um auf das HTML -Element zuzugreifen und die folgenden CSS -Eigenschaften anzuwenden:

.scroll-div
Polsterung: 5px;
Rand: 5px;
Hintergrundfarbe: RGB (179, 180, 233);
Breite: 400px;
Höhe: 120px;
Überlauf-y: Auto;
Überlauf-X: versteckt;
Text-Align: Justify;

Im obigen Code wurden die folgenden Eigenschaften von CSS angewendet:

• “Polsterung”Wird als" eingestellt "5px”Um den Raum innerhalb des DIV -Elements zuzuweisen.
• “Rand”Wird als" eingestellt "5px”, Um Platz außerhalb der Div -Grenze zu schaffen.
• “HintergrundfarbeDas Attribut zuordnet die Farbe des Elements auf dem Hintergrund zu.
• “BreiteGibt eine Behältergröße in der Breite an.
• “HöheDas Attribut verteilt die Höhe des Elements.
• “Überlauf-y”Wird verwendet, um das Element scrollbar zu machen, indem der Wert als„ festgelegt wird “Auto”:
• “Überlauf-X”Wird als" eingestellt "versteckt”Um den Div nur vertikal skrollbar zu machen.
• “ Textausrichtung”Wird für die Textausrichtung verwendet. Zum Beispiel haben wir den Text als "ausgerichtet" als "ausgerichtet"rechtfertigen”.

Es kann beobachtet werden, dass wir den Div -divisch skrollierbar erfolgreich gemacht haben:

Wir haben die Methode zur vertikaler skrollierbarer Methode mit CSS angegeben.

Abschluss

Erstellen Sie zunächst ein DIV mit einem Klassenattribut, um ein DIV mithilfe des CSS vertikal scrollbar zu machen. Das Klassenattribut wird verwendet, um auf die zuzugreifendiv" Element. Stellen Sie dann die CSS ein “Überlauf-XEigentum als "versteckt" und das "Überlauf-yEigentum als "Auto”Auf dem Klassenattribut, damit das Div -Element vertikal scrollbar ist. Dieses Tutorial hat die Methode gezeigt, um das Div mit CSS vertikal scrollbar zu machen.