Para lograr el efecto de iframe con CSS existe la propiedad “overflow”. Esta propiedad define como se comportara el contenido en un contenedor limitado en su altura y ancho. Es decir, Si el texto es mas grande que el espacio que lo contiene, esta propiedad define, el texto se mostrara de acuerdo a como se defina esta propiedad.

Overflow puede tomar 5 posibles valores:

1. inherit: El contenedor heredara la propiedad del contenedor padre.
   <div style='height:90px; width:300px; overflow:inherit'>
2. auto: Si el texto es mayor al contenedor, se muestran barras de scroll, de lo contrario no se muestran.
   <div style='height:90px; width:300px; overflow:auto'>
   
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Duis posuere nisl vestibulum metus. Nullam pede ligula, fermentum sit amet, viverra a, porttitor non, nunc. Duis lacinia. Sed molestie posuere nisl. Aliquam vitae neque. Donec justo arcu, nonummy et, dignissim non, fermentum eu, diam. Nulla facilisi. Fusce elementum, neque eget varius faucibus, orci sapien ultrices odio, et commodo metus diam id elit. Maecenas tempus condimentum dolor.
3. hidden: El contenido fuera del contenedor no se mostrara ni tampoco las barras de scroll
   <div style='height:90px; width:300px; overflow:hidden'>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Duis posuere nisl vestibulum metus. Nullam pede ligula, fermentum sit amet, viverra a, porttitor non, nunc. Duis lacinia. Sed molestie posuere nisl. Aliquam vitae neque. Donec justo arcu, nonummy et, dignissim non, fermentum eu, diam. Nulla facilisi. Fusce elementum, neque eget varius faucibus, orci sapien ultrices odio, et commodo metus diam id elit. Maecenas tempus condimentum dolor.
4. scroll: Las barras de scroll se mostraran no importa si el texto es mas grande que el contenedor o no.
   <div style='height:90px; width:300px; overflow:scroll'>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Duis posuere nisl vestibulum metus. Nullam pede ligula, fermentum sit amet, viverra a, porttitor non, nunc. Duis lacinia. Sed molestie posuere nisl. Aliquam vitae neque. Donec justo arcu, nonummy et, dignissim non, fermentum eu, diam. Nulla facilisi. Fusce elementum, neque eget varius faucibus, orci sapien ultrices odio, et commodo metus diam id elit. Maecenas tempus condimentum dolor.
5. visible: El contenido se mostrara fuera del contenedor, como si estuviera flotando. No se muestran barras de scroll
   <div style='height:90px; width:300px; overflow:visible'>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Duis posuere nisl vestibulum metus. Nullam pede ligula, fermentum sit amet, viverra a, porttitor non, nunc. Duis lacinia. Sed molestie posuere nisl. Aliquam vitae neque. Donec justo arcu, nonummy et, dignissim non, fermentum eu, diam. Nulla facilisi. Fusce elementum, neque eget varius faucibus, orci sapien ultrices odio, et commodo metus diam id elit. Maecenas tempus condimentum dolor.

One Comment on Efecto de (i)Frame con CSS

sergevirusx on Fri, 13th Jun 2008 10:56 pm


mi duda es como aplicarlo en ejemplo a un css o como se aplca en conjuncion en un archivo dreamweaver no me quedo nada claro

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!