Nettutviklere bruker HTML -komponenter, for eksempel overskrifter og bunntekst, NAV, DIV, Image og mange andre for å dele en webside og legge inn innhold. Mer spesifikt, “”Element er en populær HTML -komponent som gir en enkel måte å dele en side i seksjoner. Noen brukere ønsker å gjøre “" -komponentene vertikalt eller horisontalt rullbare for å spare websideplass.

Dette innlegget vil demonstrere metoden for å lage en vertikalt rullbar div ved å bruke CSS.

Hvordan lage/lage en div vertikalt rullbar med CSS?

Følg de gitte instruksjonene for å lage en vertikalt rullbar div ved å bruke CSS.

Trinn 1: Legg til overskrift

Først av alt, legg til en "”Tag for å legge til data i midten av siden. Sett deretter overskriften ved å bruke "

" stikkord.

Trinn 2: Lag en div container i HTML

Etter det, lage en “”Container og tilordne klassen som heter“rulle-div”. Etter det, legg til litt tekst eller et avsnitt mellom taggene:

Linuxhint nettsted

Linuxhint er et populært nettsted for oppretting av innhold. Det har bygget mange produkter for å hjelpe deg å lære om Linux, programmering, informatikk og mer. Denne plattformen gir arbeid med forskjellige kategorier, inkludert HTML/CSS, JavaScript, Git, Windows, Dockers, Discord og mange andre. Det gir en komplett guide om disse kategoriene. Brukere kan finne ethvert emne relatert til den nevnte kategorien. I denne situasjonen hvis du er nybegynner, kan du henvise til retningslinjer for å skrive en artikkel.

Produksjon

Trinn 3: Stiloverskrift

Få tilgang til overskriftselementet ved å spesifisere tagnavnet mellom taggene. Deretter bruker du “farge”Eiendom for å angi overskriftsfargen:

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

Det kan observeres at overskriftsfargen er endret:

Trinn 4: Gjør Div rullbar

Deretter, bruk ".rulle-div”Klasse for å få tilgang til HTML -elementet og bruke følgende CSS -egenskaper:

.rulle-div
polstring: 5px;
Margin: 5px;
bakgrunnsfarge: RGB (179, 180, 233);
Bredde: 400px;
Høyde: 120px;
Overflow-y: Auto;
Overflow-X: Skjult;
Tekstalign: Justify;

I koden ovenfor har følgende egenskaper til CSS blitt brukt:

• “polstring”Er satt som“5px”For å tildele plassen inne i Div -elementet.
• “Margin”Er satt som“5px”For å skape plass utenfor Div -grensen.
• “bakgrunnsfarge”Attributt tildeler fargen på elementet på bakgrunnen.
• “bredde”Angir en beholderstørrelse i bredden.
• “høyde”Attributt tildeler høyden på elementet.
• “Overflow-y”Brukes til å gjøre elementet rullbart ved å sette verdien som“bil”:
• “Overflow-X”Er satt som“skjult”For å gjøre divet bare rullbar.
• “ Tekstalign”Brukes til tekstjustering. For eksempel har vi justert teksten som "rettferdiggjøre”.

Det kan observeres at vi har gjort Div vertikalt rullbar:

Vi har uttalt metoden for å gjøre Div vertikalt rullbar ved hjelp av CSS.

Konklusjon

For å gjøre en div vertikalt rullbar ved hjelp av CSS, oppretter først en div med en klasseattributt. Klasseattributtet brukes til å få tilgang til “div”Element. Sett deretter CSS “Overflow-X”Eiendom som“skjult" og "Overflow-y”Eiendom som“bil”På klasseattributtet for å gjøre DIV -elementet vertikalt rullbar. Denne opplæringen har vist metoden for å gjøre Div vertikalt rullbar ved hjelp av CSS.