Controlando el overflow de una capa

12/Sep/2010 CSS , , 3 Comentarios

Como veíamos en el artículo definir el ancho de una capa con CSS, una de las cosas que nos puede suceder es que el contenido de la capa sea más grande al tamaño que demos a la capa y nos veamos controlando el overflow de una capa.

Aunque en el ejemplo de definir el ancho de una capa con CSS sucedía con el texto, lo más normal es que suceda de forma más normal cuando utilicemos otros elementos como las imágenes.

Por ejemplo, nos puede pasar lo siguiente:

En esta situación, cuando trabajemos con capas, tendremos que controlar la propiedad overflow de la capa. Es decir, como queremos que desborde el contenido de la capa. Para ello podemos utilizar los siguientes valores de overflow:

  • visible - el contenido superará el tamaño definido por la capa. Es decir, si es más grande el contenido, se quedará por encima de la capa. Es el valor por defecto de la propiedad overflow.
  • hidden - el contenido que desborda el tamaño de la capa se corta y queda eliminado. Es decir, no se visualiza.
  • scroll - la capa incorpora un scroll vertical y horizontal para poder ver la totalidad del contenido, sin modificar el tamaño de la capa.
  • auto - incorpora scroll solo en la dirección que lo necesite.
  • inherit - el valor de la propiedad será heredado del valor del atributo overflow del elemento padre.

Veamos como queda nuestro diseño dependiendo del valor de las propiedades de overflow:

El código CSS que tenemos que añadir quedaría de la siguiente forma:

  1. <style type="text/css">
  2. .casa{
  3. width:200px;
  4. background:red;
  5. overflow:scroll;
  6. }
  7. </style>

Este es el caso del valor overflow. Solo tienes que modificar este valor para ver como quedan los otros valores.

Seguiremos con más artículos sobre las capas. Los siguientes serán para controlar su ubicación...

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Controlando el overflow de una capa”

Víctor Cuervo

Edu

Muy buen tuto, te quería preguntar una cosa a ver si me la puedes solucionar:
Tengo una página con un canvas que es un juego en el que muevo mi personaje con las flechas pero al moverlo me hace scroll sobre toda la página y me gustaría que no lo hiciese.

Gracias de antemano

Víctor Cuervo

lineadecodigo

@Garusis,

Me alegro que te haya servido. 😀

Víctor Cuervo

Garusis

0.0… de gran ayuda! ni siquiera tenia idea de la existencia de la propiedad overflow… muy bueno

Los comentarios están cerrados.