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

Optimizar ficheros css para disminuir el tiempo de... Como ya explicamos en una artículo anterior, en ocasiones encontramos problemas que afectan al tiempo de carga de nuestra web. Llamamos a muchas hojas...
Directrices Google para webmasters Cada cierto tiempo, en el blog de webmasters de Google van publicando artículos y resúmenes de las directrices que debemos seguir los que desarrollamo...
Metaetiqueta para que navegador detecte canal de n... Para que el navegador detecte que nuestra web o blog tiene un canal de noticias RSS, debemos añadir la siguiente metaetiqueta: De esta mane...
Comprobar enlaces rotos El tener una página web con todos los enlaces correctos es mas importante de lo que se cree. De ello depende en gran medida que buscadores como Google...

Deja un comentario

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

*