Propiedad overflow

Ejemplos de uso

Si no se establece la propiedad width sobre un elemento, su tamaño se calcula automáticamente en función de si es un elemento de bloque o en línea, en función del tamaño del elemento contenedor en el que se encuentra y en función de algunos otros parámetros.

De la misma forma, si no se establece la propiedad height sobre un elemento, su valor por defecto es auto, lo que significa que el navegador muestra ese elemento con la altura necesaria para que sus contenidos se vean completamente.

En el diseño de páginas web es habitual establecer la anchura de los elementos mediante la propiedad width para crear las columnas de contenidos. Sin embargo, el uso de la propiedad height es mucho más limitado, ya que se suele dejar que el navegador calcule automáticamente la altura necesaria para cada elemento.

El siguiente ejemplo muestra cómo el navegador establece automáticamente diferentes alturas para un mismo elemento en función de su anchura:

El principal motivo por el que no suele establecerse la altura de los elementos es que normalmente no se conoce su contenido exacto. Si por ejemplo se utiliza un elemento <div> para mostrar la descripción de un producto o el texto de una noticia, no es posible fijar la altura correcta de ese <div>, ya que variará para cada producto o noticia.

Cuando se establece una altura más pequeña que la necesaria para mostrar los contenidos de un elemento, el resultado es el que muestra el siguiente ejemplo:

El estándar de CSS 2.1 indica que cuando los contenidos de un elemento no caben en su interior, el navegador debe mostrarlos aunque se salgan del elemento y se solapen con los elementos adyacentes. Afortunadamente, la propiedad overflow permite modificar este comportamiento por defecto.

El valor por defecto de la propiedad overflow es visible, que es el comportamiento que hace que los contenidos se salgan del elemento y sean completamente visibles. El siguiente valor que define overflow es hidden, que hace que el navegador oculte todos los contenidos que se salen de la caja del elemento:

El valor hidden se utiliza cuando no se puede controlar la cantidad de contenidos que se van a incluir dentro de un elemento pero al mismo tiempo se quiere controlar de forma precisa el tamaño de cada elemento de la página.

En ocasiones, el valor hidden no es apropiado porque es necesario que se vean todos los contenidos. Para estos casos, la propiedad overflow incluye el valor scroll, que hace que el navegador muestre barras de scroll sobre un elemento cuando sus contenidos no caben en la caja del elemento:

Si se establece la propiedad overflow: scroll sobre un elemento, el estándar indica que los navegadores deben mostrar siempre en ese elemento las dos barras de scroll (la vertical y la horizontal) aunque sus contenidos no se salgan o sólo se salgan por un sitio. En el medio print el contenido se imprime íntegramente, por lo que es equivalente al valor visible.

Las barras de scroll siempre se muestran en el interior de las cajas (antes que los bordes), por lo que no aumentan el tamaño total de la caja del elemento, pero sí que disminuyen el sitio disponible para mostrar sus contenidos.

Por último, la propiedad overflow también define el valor auto, que permite que cada navegador tome la decisión sobre si es necesario o no mostrar las barras de scroll. Aunque la decisión depende del navegador, el estándar de CSS 2.1 indica que si el contenido se sale del elemento, se deben mostrar barras de scroll:

El valor auto es el preferido por los diseñadores, ya que: * Si el contenido cabe dentro del elemento, no se muestra ninguna barra de scroll. * Si el contenido se sale por un lado, sólo se muestra la barra de scroll de ese lado (horizontal o vertical). * Si el contenido se sale por todos los lados, se muestran las dos barras de scroll.