css - insertar - ¿Por qué no puedes usar el posicionamiento absoluto de iframe para establecer la altura/ancho
iframe tamaño automatico (2)
Mi pregunta es similar a IFRAME y las posiciones absolutas conflictivas , pero específicamente deseo saber POR QUÉ no puede establecer tanto la izquierda / derecha o arriba / abajo en un iframe y hacer que funcione.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
iframe { position: absolute; display: block; top: 0; bottom: 0; left: 10px; width:100px; border: 1px solid black;}
div { position: absolute; display: block; top: 0; bottom: 0; left: 200px; width:100px; border: 1px solid black;}
</style>
</head>
<body>
<iframe></iframe>
<div></div>
</body>
</html>
El div ocupa la altura completa del navegador. El iframe mide 150 px. Es lo mismo en Chrome 17, Firefox 11 e IE9. Claramente, esto no es una peculiaridad del navegador. Hay algo en las especificaciones HTML5 que dice que no se puede configurar tanto a la izquierda / derecha o arriba / abajo en un iframe para establecer la altura.
¿Qué tiene de especial iframes (vs. divs)?
Iframes son "elementos reemplazados" .
Estos se tratan de manera diferente que los elementos no reemplazados. Sin entrar en detalles, solo mire la tabla de contenido de la especificación: http://www.w3.org/TR/CSS21/visudet.html
10.3 Cálculo de anchuras y márgenes
10.3.1 Elementos en línea, no reemplazados
10.3.2 Elementos en línea, reemplazados
10.3.3 Elementos a nivel de bloque, no reemplazados en flujo normal
10.3.4 Nivel de bloque, elementos reemplazados en flujo normal
10.3.5 Elementos flotantes no reemplazados
10.3.6 Elementos flotantes y reemplazados
10.3.7 Elementos absolutamente no posicionados y posicionados // div
10.3.8 Elementos reemplazados absolutamente posicionados // iframe
10.3.9 ''Bloque en línea'', elementos no reemplazados en flujo normal
10.3.10 ''Bloque en línea'', elementos reemplazados en flujo normal
Simplemente no funcionará. Es la forma en que está hecho el iFrame.
Si aún quiere llegar a la misma solución, entonces usa un div como envoltorio con posición absoluta, arriba, izquierda, derecha, abajo. Ponga en ese div su ancho de ancho de iFrame: 100% y alto: 100%.
Problema resuelto.