La propiedad overflow de CSS | Oloblogger La propiedad overflow de CSS sirve para indicar cómo se debe comportar el navegador, cuando se encuentre con una caja cuyo contenido desbor...

29 de marzo de 2011

La propiedad overflow de CSS

La propiedad overflow de CSS sirve para indicar cómo se debe comportar el navegador, cuando se encuentre con una caja cuyo contenido desborda su contenedor. Es decir, cómo se vera algo que por tener una mayor medida, no cabe dentro del espacio reservado para ello.

Las capas (div) normalmente se van redimensionando para ajustar su tamaño a lo que pongamos en su interior.
Ocupan todo el ancho disponible y van creciendo en altura según haga falta. Si limitamos el ancho con un width, este se ajustará a nuestra exigencia pero la altura seguirá ajustándose automáticamente. Es el caso de esta caja de 300px de ancho y el de la de la izquierda, que tiene asignados sólo 200px.
width: 200px;
width: 300px;

Pero veamos que ocurre cuando fijamos un ancho y un alto y el contenido no cabe dentro de la caja:

width: 400px; height:100px;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.



Lo que podemos comprobar es que la capa mantiene la posición y medidas que le hemos asignado, pero el texto desborda la caja. Nótese que si no hubiéramos dejado intencionadamente un espacio lo suficientemente grande tras ese div, estas líneas estarían solapadas con las que rebosan de la caja:

width: 400px; height:100px;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Lo que podemos comprobar es que la capa mantiene la posición y medidas que le hemos asignado, pero el texto desborda la caja...

Este es el comportamiento por defecto y que sería el equivalente a asignarle a esa capa, una propiedad overflow con el valor visible. Por tanto, los valores más interesantes, son los que todavía nos quedan por ver y estos son: hidden, scroll y auto.


El primero se entiende bastante bien si sabemos inglés: escondido, oculto. Lo que hace el valor hidden es recortar el contenido allí dónde le marcan los límites de las dimensiones de la capa. Es como si la caja fuera una ventana y pusiéramos algo por detrás; sólo veríamos lo que la transparencia de los cristales nos dejara ver y el resto quedaría tapado por la pared que la circunda. En el caso de una página web, el texto se va escribiendo con normalidad, pero cuando llegamos al límite inferior, este desaparece:

width: 280px; height:100px; overflow: hidden;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Un pequeño alto para comentar que el texto siempre se imprimirá según el ancho disponible, pero con una imagen la cosa cambia un poco, ya que estas son elementos de bloque y no pueden ser automáticamente adaptadas. Por tanto, se desbordan tanto por abajo, como por la derecha:

width: 200px; height:100px;

Precisamente por este comportamiento de la imágenes, la mayoría de plantillas incluyen un overflow: hidden; en la capa correspondiente a las entradas. Así evitamos desbordamientos accidentales que se solaparían con el contenido adyacente, como por ejemplo, la sidebar. Si alguien tiene algún problema de este tipo, ya sabe la solución:

width: 200px; height:100px; overflow: hidden;


El valor scroll también nos sirve para que se oculte el contenido desbordado, pero a diferencia del anterior, siempre se generarán automáticamente unas barras de desplazamiento. Si el desplazamiento horizontal no es necesario, como ocurre en el caso del texto, la correspondiente barra aparecerá desactivada.

width: 400px; height:100px; overflow: scroll;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

En el caso de imágenes, se activarán la vertical, la horizontal o ambas, según sea necesario. Hay que tener en cuenta que la barra vertical ocupa también espacio en la capa. Esto último quiere decir que si por ejemplo una imagen es de 300px y el div es de 300px, al ocupar la barra vertical algunos pixels, la imagen no cabrá en el ancho disponible, activándose también la barra horizontal aunque a priori pareciera que no era necesario:

width: 300px; height:100px; overflow: scroll;

width: 350px; height:100px; overflow: scroll;


Por último, nos queda el valor auto, pero este es el más fácil de imaginar. Siempre oculta el contenido que pueda desbordar, pero sólo muestra las barras de desplazamiento si es necesario. Además, no muestra siempre ambas, sino sólo aquella que se necesita:

width: 200px; height:100px; overflow: auto;

width: 400px; height:100px; overflow: auto;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

width: 400px; height:150px; overflow: auto;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Como podéis imaginar, el valor auto soluciona también diversos problemas de una tacada.


Un valor adicional que podéis ver en un overflow, es el valor inherit. Este es una especie de  valor comodín que hará que la capa que lo lleve, herede el valor que tenga la capa padre. Supongo que tendrá su interés, pero hasta la fecha yo no lo he necesitado nunca.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

9 comentarios :

  1. Muy bueno, me encanta la forma en la que explicás. Una pequeña consulta Oloman, que me recomendás leer para empezar con el tema de CSS? Estaría bueno si todo es de tu Blog, así no me confundo.

    Saludos desde Paraguay ;)

    ResponderEliminar
  2. chevere loco
    sera de gran ayuda!!

    ResponderEliminar
  3. Mark Meyer, la verdad es que nunca me había propuesto ser una guía, así que no sé que decirte. Si quieres seguir por aquí, pincha en la etiqueta CSS y ve viendo qué artículos te pueden interesar. Por citar alguno, quizás empezaría por el que habla sobre la "estructura de la plantilla" en Blogger. Suerte. ;)

    Encantado de servir de ayuda L :)

    ResponderEliminar
  4. Buenas tardes, mi problema es que tengo dos capas en paralelo y la de la derecha no tiene la propiedad width para que ocupe el resto del contenedor principal. El problema es que al añadirle a esa capa de la derecha la propiedad overflow:scroll el width de la capa se ha ajustado al contenido que tengo dentro que va en porcentajes para que se redimensione según la pantalla de cada usuario ¿se puede hacer que la propiedad overflow no me haga este efecto? Muchas gracias por anticipado.

    ResponderEliminar
    Respuestas
    1. Me perdí Guillermo ¿Me pasas una dirección para verlo según leo tu comentario?

      Eliminar
  5. Hola Oloman, soy Gordibonita del blog el rincon de los recuerdos... tengo varios blogs con las mismas medidas, pero solo en uno, despues de funcionar mucho tiempo bien, desaparecio hoy la barra de desplazamiento para subir o bajar por el blog. No es una caja. Es en el blog. Trabajo con firefox. Probe en IE y alli si aparece. www.elrincondelosrecuerdos1.blogspot.com . Sera que puedes decirme que esta pasando?. gracias.

    ResponderEliminar
    Respuestas
    1. No si no me dices que blog es ese. No se me ocurre una causa general por la que pueda pasar eso, salvo que la altura de la página sea pequeña.

      Eliminar
  6. Hola Oloman, tengo un problema con esta propiedad; lo que pasa es que tengo un div contenedor, la info que contiene es muy extensa, pero al aplicarle el overflow: auto;
    me sale la barra de desplazamiento inferior con mas anchura que el contenido.
    Agradecería que me ayudaras! :)

    ResponderEliminar
    Respuestas
    1. ¿Con más anchura que el contenido? No puedo imaginar cómo es eso porque como puedes ver en los ejemplos de esta entrada, eso no ocurre. Tendrías que enseñarme una página dónde lo tengas así.

      Eliminar