Overflow vertical en html

Si tenemos una capa ‘div’ con unas determinadas medidas, nos puede interesar que si su contenido sobrepasa la capa que lo contiene, se muestren unas barras desplazadoras. Pues bien, veamos unos ejemplos:

Ejemplo 1
Una capa con una medida máxima de 200px. Si se llega a los 200px debido al contenido, aparecerán las barras desplazadoras verticales (overflow-y: auto). Si no supera los 200px, no se mostrará la barra desplazadora.

1
2
3
4
.capascroll {
max-height: 200px;
overflow-y: auto;
}

Ejemplo 2
Tenemos una capa de medidas exactas, 200×200 pixels. Las barras desplazadoras, tanto vertical como horizontal, aparecerán si se sobrepasa las medidas.

1
2
3
4
5
.capascroll {
width: 200px;
height: 200px;
overflow: auto;
}

Combinando las propiedades: overflow, overflow-x, overflow-y se puede crear capas con un comportamiento personalizado con las barras desplazadoras.

Información relacionada

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*