Overflow vertical en html

Publicada el por

Veamos algunas opciones y ejemplos del overflow vertical en html. La propiedad de desbordamiento de CSS controla lo que sucede con el contenido que es demasiado grande para caber en un área determinada.

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.

.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.

.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.

Hay otras más opciones para tratar el overflow vertical en html que no sea mostrar las barras de desplazamiento. Que se esconda el contenido que desborda… En el caso que hemos visto, tratamos el overflow vertical, pero puede hacerse igualmente en horizontal.

Lo podréis ver en el siguiente enlace que muestra todas las opciones:

Más información