css - ejemplo - iframe javascript
IFRAME y posiciones absolutas conflictivas. (5)
¿Por qué no usas altura y anchura? Aún obtendría una posición absoluta configurando arriba / abajo y izquierda / derecha, como en el ejemplo a continuación.
<!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).
Me gustaría tener un tamaño IFRAME dinámicamente usando el siguiente CSS:
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Sin embargo, ningún navegador parece admitir esto.
En buenos navegadores, podría envolver el IFRAME en un DIV con el estilo CSS citado y establecer el alto y ancho del IFRAME en 100%. Pero esto no funciona en IE7. Aparte de usar expresiones CSS, ¿alguien ha logrado resolver esto?
Actualizar
MatTheCat respondió con un escenario que funciona si el IFRAME está ubicado directamente debajo del cuerpo y las etiquetas body / html tienen la altura: 100% establecida. En mi pregunta original, no indiqué dónde estaba IFRAME y qué estilo se aplicó a su contenedor. Esperemos que las siguientes direcciones aborden esto:
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
y asumamos el siguiente contenedor CSS:
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
Si ahora coloca la height: 100% en el IFRAME, no se dimensionará correctamente.
Puedes intentar usar esto:
document.getElementsByTagName(''iframe'')[1].style.borderWidth = ''0px'';
document.getElementsByTagName(''iframe'')[1].style.backgroundColor = ''green'';
Use un div para el relleno en todos los lados. Coloque el iframe en él usando el 100% de su div padre.
http://jsfiddle.net/sg3s/j8sbX/
Ahora hay algunas cosas que necesitas recordar. Un iframe es originalmente un marco en línea, por lo que si bien a los navegadores modernos no les importa, configure display: bloquéelo. Por defecto también tiene un borde. Cualquier cambio que queramos que se haga 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 sobre él:
http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, en realidad necesitas configurar border = 0 en el iframe para IE7)
Debería funcionar bien en IE7 + (a IE6 no le gusta el posicionamiento absoluto + usar arriba / derecha / abajo / izquierda para darle diseño)
Editar alguna explicación extra
Necesitamos diseñar el contenedor de iframe principalmente porque un iframe en sí mismo no se deja dimensionar con la parte superior / izquierda / inferior / derecha. Pero lo que funcionará es establecer su ancho y alto en 100%. Así que a partir de ahí, simplemente envolvemos el iframe en un elemento que podemos diseñar de manera confiable para hacer menos del 100% de la ventana, el tamaño que los elementos predeterminan cuando ninguno de sus padres tiene una altura / anchura estática.
Pensando en ello podemos realmente soltar el absoluto y bloquear. Sin embargo, http://jsfiddle.net/sg3s/j8sbX/26/ puede querer doublecheck IE7.
Después de que hagamos el iframe 100% alto y ancho, no podemos poner ningún margen, relleno o borde en él porque eso se agregará al ya alto 100% alto y ancho. Haciéndolo así más grande que su contenedor, para divs que resultarán en un desbordamiento: visible, simplemente mostrando todo lo que va por los bordes. Pero eso, a su vez, arruinaría los márgenes, los rellenos y las compensaciones que dimos a nuestros elementos ... De hecho, para que sea solo el 100% de alto y ancho, debe asegurarse de haber eliminado el borde predeterminado de iframes.
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.
Yo diría que eche un vistazo a esta pregunta de desbordamiento de pila. Podría ayudar:
Hacer Iframe para adaptarse al 100% de la altura restante del contenedor
html,body {
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#myiframe {
width:100%;
height:100%;
border:0;
}
funciona bien para mí incluso con IE7.