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

Habilitar WebGL en navegador Chrome Si estáis viendo esta entrada de blog es porque seguramente estaréis experimentando con librerías 3D para vuestro navegador. Yo seguí los siguientes p...
Medidas usuales de pantallas de ordenadores y móvi... Medidas pantallas de ordenador Pequeñas (portátiles y pantallas antiguas): 1024x600 Medianas: 1280x720 Grandes: 1400x900, 1600x1200 ... M...
Apuntes librería JavaScript 3D Three.js Este fin de semana, y aprovechando las fiestas Navideñas, me he puesto a curiosear la librería Three.js Como normalmente tengo la cabeza casi llena de...
Encriptar email para poner en web Cuando se ponen emails en una web, éstos deben estar de alguna manera escondidos para que los robots no puedan leerlos y añadirlos a sus listas de spa...

Deja un comentario

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

*