logo

Realizarea unui div care poate fi derulat vertical folosind CSS

Este ușor să faceți un div care poate fi derulat pe verticală, folosind proprietatea de overflow CSS. Există valori diferite în proprietatea de debordare . Putem folosi această proprietate pentru a obține o bară de defilare pe o pagină web. Exemplele menționate mai jos sunt modalitățile de a seta o bară de defilare verticală pe o pagină web.

Exemplul 1: În acest exemplu, am setat overflow-x: hidden; și overflow-y: auto; care va ascunde automat bara de defilare orizontală și va prezenta doar bara de defilare verticală.

html






> <>html>>>>> head>>>>> <>style>>>>> h1 {> >color: Green;> >}> >div.scroll {> >margin: 4px, 4px;> >padding: 4px;> >background-color: green;> >width: 500px;> >height: 110px;> >overflow-x: hidden;> >overflow-y: auto;> >text-align: justify;> >}> >style>cap>

techcodeview.comh1>
Este o platformă bună pentru a învăța programarea. Este un site educațional. Pregătiți-vă pentru recrutarea companiilor bazate pe produse, cum ar fi Microsoft, Amazon, Adobe etc., cu un curs gratuit de pregătire pentru plasare online. Cursul se concentrează pe diverse întrebări MCQ și codificare care ar putea fi puse în interviuri și face ca sezonul de plasare viitor să fie eficient și de succes. De asemenea, orice geek îi poate ajuta pe alți tocilari scriind articole pe techcodeview.com, publicarea articolelor urmează câțiva pași care sunt articolele care necesită puține modificări/îmbunătățiri din partea recenzenților sunt publicate mai întâi. Pentru a vă revizui rapid articolele, consultați articolele existente, stilul lor de formatare, stilul de codare și încercați să vă faceți aproape de ele. În cazul în care sunteți începător, puteți consulta Ghid pentru a scrie un articol div> center> body> html>>

>

>

Ieșire:

ezgifcom-video-to-gif-(12)

Ieșire

Exemplul 2: În acest exemplu, utilizați auto în loc de overflow-x:hidden; și overflow-y:auto; pentru a face div derulabil vertical.

html

execută shell script




> <>html>>>>> head>>>>> <>style>>>>> h1 {> >color: Green;> >}> >div.gfg {> >margin: 5px;> >padding: 5px;> >background-color: green;> >width: 500px;> >height: 110px;> >overflow: auto;> >text-align: justify;> >}> >style>cap>

techcodeview.comh1>
Este o platformă bună pentru a învăța programarea. Este un site web educațional. Pregătiți-vă pentru recrutarea companiilor bazate pe produse, cum ar fi Microsoft, Amazon, Adobe etc., cu un curs gratuit de pregătire pentru plasare online. Cursul se concentrează pe diverse întrebări MCQ și codificare care ar putea fi puse în interviuri și face ca sezonul de plasare viitor să fie eficient și de succes. De asemenea, orice geek îi poate ajuta pe alți tocilari scriind articole pe techcodeview.com, publicarea articolelor urmează câțiva pași care sunt articolele care necesită puține modificări/îmbunătățiri din partea recenzenților sunt publicate mai întâi. Pentru a vă revizui rapid articolele, vă rugăm să consultați articolele existente, stilul lor de formatare, stilul de codare și încercați să vă faceți aproape de ele. În cazul în care sunteți începător, puteți consulta Ghidul pentru a scrie un articol div> center> body> html>>

>

>

Ieșire:

ezgifcom-video-to-gif-(13)

Ieșire