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:

  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.

3 thoughts on “Efecto de (i)Frame con CSS

  1. sergevirusx

    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

    Reply
  2. Victor De la Rocha

    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?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *