23 de enero de 2007

CSS: Poner áreas con scroll dentro una página

La opción clásica ha sido siempre usar iframes (bueno, no tan clásica porque en Netscape no funcionaban). Pero ahora se estila más hacerlo con CSS y bueno, pues voy a explicaros como se hace a mi manera :).

En primer lugar te creas la capa con el clásico "<div>" y dentro pones texto, imágenes o lo que te de la gana cerrando después la capa con "</div>"

Bueno, pues para que ese montón de texto e imágenes se convierta en una capa con scroll tienes que añadir lo siguiente en el tag "div": <div style="overflow:auto; height:450px;" >.

La propiedad overflow es la que indica como se desborda el contenido de esa capa. Tenemos cuatro posibilidades:
  • overflow:auto --> Tenemos barras de scroll en cuanto el contenido de la capa sea más grande que la misma.
  • overflow:scroll --> Tenemos barras de scroll independientemente de que el contenido desborde la capa.
  • overflow:visible --> La capa crece para mostrar todo el contenido.
  • overflow:hidden --> El texto que se pasa de tamaño desaparece.
Tenemos por otro lado la propiedad height que sirve para indicar la altura de la capa tanto con % cómo con píxeles (px).

Combinando estas dos propiedades tendremos por fin nuestra área con contenido y scroll sin tener que recurrir a iframes.



Comparte este Post:
Menéame Digg!

4 comentarios:

kalateur dijo...

Esto lo hemos utilizado en nuestro trabajo para evitar tener que hacer paginaciones en los listados(un quebradero de cabeza)

Lucas dijo...

Muchas gracias! Me sirvio mucho para una web que estoy haciendo!

Saludos!

Lucas

jcrequena dijo...

Gracias, me ha sido muy util

Anónimo dijo...

Wooju siempre quince poner uno de esos en mi web pero no sabía como y no habían tutoriales y este esta muy fácil gracias :D me tomo solo un
minuto