Overflow

Como ya sabes, dentro de un DIV o capa puedes insertar el elemento del tipo que quieras, incluso otro DIV o varios de ellos, o imágenes, o lo que sea. Pero, ¿Qué sucede si en la hoja de estilos le digo que tenga una anchura de 500 pixeles y el elemento que tiene dentro es más ancho?

La propiedad overflow se define, como el resto, dentro de los corchetes { y } del DIV que deseemos y puede tomar los siguientes valores según lo que queramos que ocurra en el caso anterior (si no es nuestro caso no es necesario definir esta propiedad, claro):


Overflow: visible

Indica que si el elemento de dentro del DIV es de mayor tamaño en altura o anchura que el DIV que lo contiene, entonces se le dá permiso a este elemento para sobresalga del DIV. Quedaría algo feo en algunos casos, pero quizás nos interese alguna vez. En cualquier caso no está mal saberlo, no?

#nombredeldiv {width:200px; border:#000 2px solid; overflow:visible}

Overflow: hidden

En este otro caso el elemento del interior aparece recortado de modo que solo se muestra lo que cabe dentro del DIV que lo contiene. Además no aparecerán las barras de deslizamiento para poder ver el resto del elemento. Si deseamos que aparezcan esas barras tendremos que usar otra opción.

#nombredeldiv {width:200px; border:#000 2px solid; overflow:hidden}

Overflow: scroll

Con esta otra opción el elemento aparece también recortado como con el hidden, pero en este caso aparecen alrededor del DIV las barras de desplazamiento para que el usuario pueda ver el resto del elemento.

#nombredeldiv {width:200px; border:#000 2px solid; overflow:scroll}

Overflow: auto

Con está última opción posible, el navegador que use el navegante mostrará las barras de navegación necesarias (vertical, horizontal o ambas según el caso) solamente si estas son necesarias para mostrar el resto del elemento. En caso de que el elemento quepa bien dentro del DIV no aparecerian estas barras.

#nombredeldiv {width:200px; border:#000 2px solid; overflow:auto}

Anda que no estás aprendiendo, te vas a hacer tod@ un@ profesional del ramo colega

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net