Efecto de (i)Frame con CSS
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:
- inherit: El contenedor heredara la propiedad del contenedor padre.
<div style='height:90px; width:300px; overflow:inherit'> - 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. - hidden: El contenido fuera del contenedor no se mostrara ni tampoco las barras de scroll
<div style='height:90px; width:300px; overflow:hidden'> - 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. - 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.
Si deseas contactarme puedes hacerlo en contacto@masio.com.mx o deja comentario en alguna de las entradas del blog. Tambien me encuentras en twitter en 
o deja comentario en alguna de las entradas del blog. Tambien me encuentras en twitter en
sergevirusx
13 Jun, 2008
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
Victor De la Rocha
17 Jan, 2009
Tengo un problema con ‘Equis’ persona que se quedó no se en que año y ama los ‘frames’. Ok, intenté engañarla con esto, peeeeero… no jala en los utos iPhones ¿algun fix conocido, habido o por haber? ¿Algúna Masio-Mexicanada a la mano?
Momoshiro
24 May, 2009
Muchas gracias por el articulo, me fue de mucha ayuda!