IFRAME y posiciones absolutas en conflicto

Me gustaría tener un IFRAME dinámicamente tamaño utilizando el siguiente CSS:IFRAME y posiciones absolutas en conflicto

#myiframe { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

Sin embargo, no hay ningún navegador parece apoyar esto.

En buenos navegadores podría envolver el IFRAME en un DIV con el estilo CSS citado y establecer el ancho & de la IFRAME al 100%. Pero esto no funciona en IE7. A falta de usar expresiones CSS, ¿alguien ha logrado resolver esto?

actualización

MatTheCat respondió con un escenario que funciona si el IFRAME está situado directamente debajo del cuerpo y las etiquetas del cuerpo/HTML tienen altura: 100% conjunto. En mi pregunta original, no indiqué dónde estaba el IFRAME y qué estilo se aplicó a su contenedor. Con suerte las siguientes direcciones: este

<html> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html>

y asumamos que el siguiente CSS envase:

#container { 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
}

si ahora colocan height: 100% en el IFRAME no lo hará tamaño correctamente.

Fuente

2010-10-20 Anonymous

le sugiero que 'acepta' uno de los dos más nuevas respuestas aquí ya que tanto responder a la pregunta. Le concedí una recompensa. –

html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
    min-height:100%; 
} 
#myiframe { 
    width:100%; 
    height:100%; 
    border:0; 
}

funcionan bien incluso con IE7.

Fuente

2010-10-20 14:53:28 MatTheCat

Gracias por la respuesta. Lamentablemente, no fui lo suficientemente específico en la pregunta. Lo he modificado con más detalles. –

Yo diría que echa un vistazo a esta pregunta sobre el desbordamiento de pila. Podría ayudar:

Make Iframe to fit 100% of container's remaining height

Fuente

2010-10-20 16:01:55 InvisibleBacon

¿Por qué no usar la altura & ancho? Aún obtendría una posición absoluta al configurar arriba/abajo & izquierda/derecha, como en el ejemplo siguiente.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       margin:0; 
       padding:0; 
       border:0px; 
       height:100%; 
       width:100%; 
      } 
      #container { 
       position: absolute; 
       top: 10px; 
       bottom: 10px; 
       left: 10px; 
       right: 10px; 
      } 
      #myiframe { 
       position: absolute; 
       top: 0%; 
       left: 0%; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html>

Esto funciona para mí (Probado en IE9).

Fuente

2011-09-30 18:33:45 Sathvik

Esto funciona. Lo único que me faltaba era la 'posición: absoluta' en el' iframe'. ¿Puedes explicar por qué tengo que envolver el 'iframe' en un contenedor en vez de poner el CSS del contenedor en él? –

¿Qué quiere decir con poner el CSS del contenedor en el 'iframe'? Si está hablando de no usar un contenedor en primer lugar, entonces el elemento del cuerpo (principal) se convierte en su contenedor por defecto. – Sathvik

Todavía podríamos obtener el mismo efecto al variar los parámetros 'top',' left', 'height' y' width' en 'iframe'. – Sathvik

Utilice un div para el relleno en todos los lados. Coloque el iframe en él usando el 100% de su div principal.

http://jsfiddle.net/sg3s/j8sbX/

Ahora bien, hay algunas cosas que usted necesita recordar. Un iframe es originalmente un fotograma en línea, por lo que, aunque a los navegadores modernos no les importa, configure display: block on it. Por defecto también tiene un borde. Cualquier ataque que deseemos hacer debe hacerse en el contenedor iframe en su lugar o romperemos el límite del 100% del contenedor.

Y así es como pondríamos un elemento por encima de ella:

http://jsfiddle.net/sg3s/j8sbX/25/ (edit: mi mal, en realidad se necesita establecer border = 0 en el marco flotante para IE7)

debería funcionar bien en IE7 + (IE6 no le gusta el posicionamiento absoluto + usando la parte superior/derecha/abajo/izquierda para darle diseño)

Editar alguna explicación adicional

necesitamos el estilo del contenedor iframe m Ainly porque un iframe en sí mismo no se deja dimensionar con top/left/bottom/right. Pero lo que funcionará es establecer su ancho y alto al 100%. Así que a partir de ahí simplemente envolvemos el iframe en un elemento que podemos diseñar de manera confiable para hacer menos de la ventana al 100%, el tamaño predeterminado de los elementos cuando ninguno de sus padres tiene una altura/ancho estáticos.

Pensando en ello, podemos dejar de lado el absoluto y bloquear. http://jsfiddle.net/sg3s/j8sbX/26/ Puede que quiera verificar doblemente IE7 en eso.

Después de hacer el iframe 100% alto y ancho, no podemos poner ningún margen, relleno o borde sobre él porque se agregará al ancho ya 100% de altura &. Por lo tanto, haciéndolo más grande que su contenedor, para divs que dará lugar a un desbordamiento: visible, simplemente mostrando todo lo que pasa por los bordes. Pero eso, a su vez, arruinaría los márgenes, los rellenos y las compensaciones que dábamos a nuestros elementos ... De hecho, para que sea solo del 100% de alto y ancho, debe asegurarse de haber eliminado el borde predeterminado de los marcos flotantes.

Pruébelo agregando un borde más grande (como 3px) en mi ejemplo al iframe, debería poder ver fácilmente cómo está afectando el diseño.

Fuente

2011-09-30 18:55:01 sg3s

@JustinSatyr actualizó mi respuesta;) – sg3s

-1

Usted puede tratar de usar esto:

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px'; 
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';

Fuente

2014-11-27 14:24:04 Prachi

IFRAME y posiciones absolutas en conflicto

Respuesta

Cuestiones relacionadas