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.