Como hacer que un iframe ocupe el 100% de un div?

[marcosr]

Hola,


Estoy intentando lograr que un iframe ocupe el 100% de un div.
Aclaro que uso el iframe debido a que no puedo cargar con AJAX el mismo contenido.


Tengo un div que se llama "contenido" que tiene ancho 80% de la pantalla y alto 100%, necesito que dentro de ese div se muestre un iframe que ocupe el 100% del div, no puedo lograrlo.

Ya le he definido al iframe height y width 100%, tanto en las propiedades del iframe como en el estilo del mismo (CSS).

He aquí el problema:





Espero alguien pueda ayudarme.

[DragonX]

podriamos ver todo tu código HTML y CSS?

[marcosr]

Por supuesto.


Este es el iframe:

Código:

<div id="vista">
    	<div class="cabezal">Contenido</div>
        <div class="contenido" id="pp">
<iframe frameborder="0" height="100%" width="100%" src="<?php echo $archivo; ?>" style="float:left; height:100%; width:100%;"></iframe>
</div>
    </div>

El CSS es este:

Código:

#vista {
	float:left;
	width:79%;
	height:100%;
	margin:0 1% 0 0;
}
.contenido {
	width:100%;
	min-height:400px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:0.7em;
	padding:7px 0 3px 5px;
	border:1px solid #002F5F;
	border-top:none;
	color:#333;
	background:white;
}
#contenido {
	float:left;
	width:100%;
	height:100%;
}
#pp { height:100%; }

[ssclamp]

Hola marcosr

Sólo tienes que añadir esto a tu css, en primer lugar:

html, body {
height: 100%;
}


Saludos

[marcosr]

@ssclamp:
Muchas gracias, tu solución funciono perfectamente.



Un abrazo !

[ssclamp]

De nada marcosr.

Resulta curioso pensar que una página web, su contenedor primario (la etiqueta html), necesita tener expresada sus medidas para algunas cosas: da la impresión, visualmente hablando, que una página web (aunque esté vacía de contenido, o con poco contenido) es como un folio, que existe por sí mismo y cuyo espacio puede ser ocupado sin más, sin embargo, en ocasiones, es imprescindible decirle a la etiqueta html que tiene un tamaño para que pueda ser ocupado.

En el modo más permisivo, sin doctype, los navegadores sí entienden que el espacio html es todo el que ocupe en la pantalla, sin necesidad de fijarle ningún valor... es otra curiosidad más.

Saludos