Iframe height 100% no funcina en IE ni Firefox

Ozone · #1 (**permalink**) 16/08/2009, 21:58

Hola, tengo ese problema no me funciona este code:

Código HTML:

<iframe src=".html" width="100%" height="100%" frameborder="0" scrolling="auto">
</iframe>

El width 100% si lo toma, pero el height no... Hay alguna alternativa? Porque no me gusta como queda si le pongo una altura fija, ya que aparecen las barras y sin le saco las barras por code me queda inutil el IFRAME porque es necesario bajar. Por eso sería ideal que la altura se adapte a mi contenedor... en Chrome si funciona...

Gracias!

abimaelrc · #2 (**permalink**) 16/08/2009, 23:04

Que raro lo coloque en mi computadora como lo declaraste y me salio al 100% Trata de colocarlo dentro de un table y declaralo a ver si te sale. Sino te sugiero que coloques un link de tu pagina web para poder ver el codigo fuente que tienes declarado.

Ozone · #3 (**permalink**) 16/08/2009, 23:53

Gracias!, fíjate aquí:
http://cocositen.de.tl

abimaelrc · #4 (**permalink**) 17/08/2009, 01:33

Bueno lo probe y tienes razon tienes problemas con el iframe. Pero surge por el doctype, pero aun así vas a tener que usar javascript para lograr el iframe al 100%. Encontre un ejemplo en internet verifica si te es útil.

Código html:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<HEAD> 
<TITLE>Iframe with 100% height - guymal.com</TITLE> 
<script language="JavaScript"> 
<!--
 
function resize_iframe()
{
    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight){
        height=document.body.clientHeight;//IE
    }
    document.getElementById("iframe1").style.height=parseInt(height-document.getElementById("iframe1").offsetTop-8)+"px";//resize the iframe according to the size of the window
} 
window.onresize=resize_iframe; //instead of using this you can use: <BODY onresize="resize_iframe()">
//-->
</script> 
</HEAD> 
 
<BODY> 
<iframe src="b.html" id='iframe1' width="100%" onload='resize_iframe()'></iframe> 
</BODY> 
</HTML>

Tienes que declarar el doctype igual como te menciono. Aqui esta la pagina donde encontre el codigo

deirdre · #5 (**permalink**) 17/08/2009, 10:05

Hola

Se puede hacer como dice abimaelrc, pero quizás no sea adecuado utilizar javascript para este uso, siendo más fácil y adecuado una simple declaración en la hoja de estilo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe al 100% ancho y alto</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
</head>

<body>
<iframe src="a.htm" width="100%" frameborder="0" height="100%" scrolling="auto"></iframe>
</body>

</html>

De esta forma el iframe ocupa el 100% del ancho y el alto de la pantalla.

Bye

Ozone · #6 (**permalink**) 17/08/2009, 11:31

Cita:

Iniciado por deirdre

Hola

Se puede hacer como dice abimaelrc, pero quizás no sea adecuado utilizar javascript para este uso, siendo más fácil y adecuado una simple declaración en la hoja de estilo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe al 100% ancho y alto</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
</head>

<body>
<iframe src="a.htm" width="100%" frameborder="0" height="100%" scrolling="auto"></iframe>
</body>

</html>

De esta forma el iframe ocupa el 100% del ancho y el alto de la pantalla.

Bye

Claro, el tema es que yo tengo el body con muchas otras definiciones que hacen al aspecto de mi web, si pongo ese code se me desacomodará todo....

abimaelrc · #7 (**permalink**) 17/08/2009, 11:34

Haz una prueba tratando solamente el height: 100% dentro del CSS que te mencionó deirdre.

deirdre · #8 (**permalink**) 17/08/2009, 17:06

Hola Ozone

Creo que en tu petición de ayuda (primer post) sólo hablas de darle a un iframe un ancho y un alto del 100%.

Ahora estás hablando de otra cosa.

Mucho mejor es que pongas el código que tienes (completo: desde <html> hasta </html>) y así te podríamos ayudar adecuadamente.

Bye

deirdre · #9 (**permalink**) 17/08/2009, 17:42

Hola...

Si lo que quieres es una página que tenga una determinada zona arriba (algo así como una cabecera) y que luego el resto de la página, en ancho y alto, tenga un iframe que ocupe totalmente el resto del espacio disponible, mírate esto que hice hace poco para otra ayuda:

Mirar esto

Espero tu comentario.

Bye

ssabrewolf · #10 (**permalink**) 11/01/2010, 19:04

No acotumbro a hacer esto, pero acabo de tirarme como 5 horas buscando la solución a
este dilema para entregar mi tesis de grado y todas eran inutiles , finalmente la pude deducir al estudiar el dom nativo de firefox, para que no le ocurra a nadie mas:

Html
<iframe id="glue" onload="resizeScore(this)" src="./scores.jsp" scrolling="no" style="padding: 0;display:block; overflow: hidden" frameborder="0" width="480" >
</iframe>

Javascript

function resizeScore(glue)
{

var extra=glue.contentWindow.scrollMaxY;
if(extra>0)
{
var finalHeight=150+extra;
glue.style.height= finalHeight+'px';
}

}

Suerte

ssabrewolf · #11 (**permalink**) 11/01/2010, 19:27

una anotacion , lo que esta dentro del iframe debe estar dentro un div al 100% :
<div
style="width: 100%;height:100%;position:absolute;top:0px;left:0p x" >
</div>

Saludos

galax13a · #12 (**permalink**) 11/08/2010, 11:00

me rompe las bolas nada de esto me ha servido, nose pq es tan dificil manejar el auto height de un iframe calculando el largo de la pagina antes de mostrarla y asi darle automatizado el alto que es cuando se muestre en pantalla....

gabrielzz · #13 (**permalink**) 09/09/2011, 09:20

Hola, yo te recomiendo que intentes lo que dice deirdre. Leí que pusiste que se te va a hacer lío porque tenes muchos styles pero te cuento que yo tenía el mismo problema que vos y lo solucioné de esa forma.
Nos vemos

Cita:

Iniciado por deirdre

Hola

Se puede hacer como dice abimaelrc, pero quizás no sea adecuado utilizar javascript para este uso, siendo más fácil y adecuado una simple declaración en la hoja de estilo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe al 100% ancho y alto</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
</head>

<body>
<iframe src="a.htm" width="100%" frameborder="0" height="100%" scrolling="auto"></iframe>
</body>

</html>

De esta forma el iframe ocupa el 100% del ancho y el alto de la pantalla.

Bye