Overflow a fondo

La propiedad overflow sirve para especificar el comportamiento de un elemento cuando su contenido supera el tamaño del mismo. Por defecto, el contenido “extra” será visible, pero puede tener otros valores.

Overflow es soportada correctamente por todos los navegadores excepto IE6 e inferiores, que dependiendo de las circunstancias dará algunos problemas.

overflow: auto

Con este valor el contenido del elemento se ocultará, pero se dispondrá de una barra de scroll (horizontal o vertical, dependiendo de las circunstancias) para poder examinarlo al completo. Si el contenido no supera el tamaño del elemento, el scroll no aparecerá.

overflow: hidden

Al igual que en auto, el contenido se ocultará. Sin embargo, con este valor no se mostrará scroll, por lo que el contenido sobrante será invisible.

overflow: scroll

El comportamiento es el mismo que con auto, pero el scroll se mostrará siempre, independientemente del contenido del que disponga el elemento.

Cuando tratamos con hojas de estilo para impresión, el valor scroll permite imprimir el contenido sobrante.

overflow: visible

Es el valor que viene establecido por defecto. Se mostrará todo el contenido del elemento, sobrepase su tamaño o no. De esta manera, se puede dar el caso de que el contenido se superponga a otros elementos de nuestro diseño. En IE6 e inferiores, el elemento se ajustará al contenido, en vez de mostrarse éste fuera del mismo.