Hvordan kan jeg legge til en vertikal rullefelt til diven min automatisk

En DIV-beholder i HTML kan ha flere elementer og underelementer, og den har en spesifikk størrelse. Så noen ganger er det behov for å legge til en rullefelt med Div -beholderen når gjenstandene overskrider størrelsesgrensen til DIV eller når de ikke passer inn i DIV -beholderen riktig.

Denne artikkelen vil diskutere den nyttige metoden for å legge til en vertikal rullefelt til DIV automatisk ved hjelp av HTML og CSS.

Hvordan legge til en vertikal rullefelt til Div?

Utviklerne kan legge vertikale rullefelt til Div ved å bruke “Overflow-y: Rull”Eiendom sammen med noen andre CSS -egenskaper på DIV -containerelementet.

Eksempel

La oss forstå dette med et enkelt eksempel ved først å lage en "div”Container med noen HTML -elementer inne i den og deretter bruke CSS“flyte”Eiendom for å legge til en vertikal rullefelt med div:

Følgende er noen berømte front-end og back-end
Språk:

Python

JavaScript

Java

PHP

C#

Gå

Fort

Rubin

Matlab

Typeskrift

Scala

Html

CSS

Rust

Perl

SQL

R

NOSQL

C

C++

I ovennevnte kodebit:

• En "”Element er lagt til med en klasse erklært som“Rullefelt”.
• “”Container har en liste over tjue front-end og back-end språk inni den.

Nå er det pålagt å bruke CSS -egenskapene på DIV ved å legge til klasseleseren:

.Rullefelt

Overflow-y: Rull;
Maks-høyde: 200px;
Maks bredde: 300px;
tekst-align: sentrum;
Bakgrunnsfarge: Azure;

I ovennevnte CSS -kodebit:

• “Overflow-y”Eiendom med verdien”bla”Legges til for å lage en vertikal rullefelt for div.
• Etter det, “maksimal”Av Div -beholderen er blitt definert som“200px" og "Maks bredde”Har blitt definert som“300px”.
• Verdien av “Tekstalign”Eiendom er satt som“senter”For å justere varene inne i diven til sentrum. Dette gjøres bare for å lage en bedre presentasjon av DIV -beholderen.
• Bakgrunnsfargen for div er blitt definert som “Azure”Det vil skille utseendet til Div Container fra resten av skjermen.

Som et resultat vil DIV -beholderen bli opprettet, og den vil ha en vertikal rullefelt på høyre side:

Slik kan vi legge til en vertikal rullefelt til en div automatisk.

Konklusjon

Den vertikale rullefeltet kan legges til en DIV automatisk ved å referere til DIV -elementet gjennom en ID eller en klassevelger i CSS -stilelementet og deretter bruke “Overflow-y: Rull”Eiendom til Div -elementet. Parametrene til rullefeltet vises i henhold til de andre ekstra egenskapene som "maksimal”Og“Maks bredde”Av Div Container. Denne bloggen er en informativ guide om metoden for å legge til en vertikal rullefelt til en div.