Los desarrolladores web usan componentes HTML, como encabezados y pies de página, NAV, DIV, imagen y muchos otros para dividir una página web e incrustar contenido. Más específicamente, el "El elemento es un componente HTML popular que proporciona una manera fácil de dividir una página en las secciones. Algunos usuarios desean hacer que los "" componentes se desplazen vertical u horizontalmente para conservar el espacio de la página web.

Esta publicación demostrará el método para hacer un DIV verticalmente desplazable utilizando CSS.

Cómo hacer/crear un div vertical vertical con CSS?

Para crear un DIV verticalmente desplazable utilizando CSS, siga las instrucciones dadas.

Paso 1: Agregar encabezado

En primer lugar, agregue un ""Etiqueta para agregar datos en el centro de la página. Luego, inserte el encabezado utilizando el "

" etiqueta.

Paso 2: cree un contenedor Div en HTML

Después de eso, cree un ""Contenedor y asigne la clase llamada"desplazamiento por desplazamiento". Después de eso, agregue algún texto o un párrafo entre las etiquetas:

Sitio web de Linuxhint

Linuxhint es un sitio web popular para la creación de contenido. Ha creado muchos productos para ayudarlo a aprender sobre Linux, programación, informática y más. Esta plataforma proporciona trabajo en diferentes categorías, incluidos HTML/CSS, JavaScript, Git, Windows, Dockers, Discord y muchos otros. Proporciona una guía completa sobre estas categorías. Los usuarios pueden encontrar cualquier tema relacionado con la categoría mencionada. En esta situación, si usted es un principiante, puede consultar las directrices para escribir un artículo.

Producción

Paso 3: encabezado de estilo

Acceda al elemento de encabezado especificando el nombre de la etiqueta entre las etiquetas. Luego, aplique el "color"Propiedad para establecer el color de encabezado:

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

Se puede observar que el color de encabezado ha cambiado:

Paso 4: Haga que Div sea desplazable

A continuación, usa el ".desplazamiento por desplazamientoClase "para acceder al elemento HTML y aplicar las siguientes propiedades de CSS:

.Divirado por desplazamiento
relleno: 5px;
margen: 5px;
Color de fondo: RGB (179, 180, 233);
Ancho: 400px;
Altura: 120px;
Overflow-y: Auto;
desbordamiento-x: oculto;
text-align: justificar;

En el código anterior, se han aplicado las siguientes propiedades de CSS:

• "relleno"Está configurado como"5px"Para asignar el espacio dentro del elemento div.
• "Margen"Está configurado como"5px"Para crear espacio fuera del límite Div.
• "color de fondo"El atributo asigna el color del elemento en el fondo.
• "ancho"Especifica un tamaño de contenedor en ancho.
• "altura"El atributo asigna la altura del elemento.
• "desbordamiento"Se usa para hacer que el elemento se ajuste al establecer su valor como"auto":
• "desbordamiento"Está configurado como"oculto"Para hacer que el div sea verticalmente desplazable solo.
• " texto alineado"Se utiliza para la alineación de texto. Por ejemplo, hemos alineado el texto como "justificar".

Se puede observar que hemos hecho con éxito el Div verticalmente desplazable:

Hemos declarado el método para hacer que el Div verticalmente sea desplazable usando CSS.

Conclusión

Para hacer un Div verticalmente desplazable usando el CSS, primero, cree un DIV con un atributo de clase. El atributo de clase se utiliza para acceder al "div" elemento. Luego, configure el CSS "desbordamiento"Propiedad como"oculto" y el "desbordamiento"Propiedad como"auto"En el atributo de clase para hacer que el elemento Div sea vertical verticalmente. Este tutorial ha demostrado el método para hacer que el Div verticalmente sea desplazable usando CSS.