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.

Artículos relacionados

Mantener capa fija en la parte inferior del navega... En casos como el mensaje de aviso de cookies, nos puede interesar mostrar una capa
que esté siempre fija en la parte inferior de la pantal...
HTML Kick Start Os facilitamos el enlace de un nuevo framework para la creación de páginas web de forma rápida y sencilla con HTML5 y CSS. http://www.99lime.com/el...
GroundWork CSS – 03 – Framework HTML5 ... Tercer de los 4 vídeos del tutorial de GroundWork, un framework para la creación de página web responsive. En este caso, veremos como crear botones de...
GroundWork CSS – 04 – Framework HTML5 ... Último de los cuatro vídeos del tutorial para la creación de páginas web responsive con el framework GroundWork CSS. En este caso vemos como crear el ...

Deja un comentario

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

*