Comunidad de diseño web y desarrollo en internet online

Problema al dividir ventana en 3filas con IE.

Citar            
MensajeEscrito el 25 Dic 2007 09:07 pm
Saludos.
Soy nuevo por aquí, y tras algún tiempo leyéndoos en la sombra, me he decidido a plantearos una pregunta. A ver si alguien puede echarme una mano.

Quiero conseguir esto:

es decir:
Dividir el alto TOTAL de la ventana en tres filas:, tal que:
superior: 30px
inferior: 15px
medio: "lo que quede" (en "frames", sería "*"), aunque no puedo adoptar esta solución tan rápida.

Lo más cercano que tengo a la solución, sería:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><style>body {height:100%;}</style></head>
<body>
<div style="height:100%; position: absolute; top:0px; left:0px;">
__<table style="height:100%;" border="1">
____<tr><td style="height:30px;">1</td></tr>
____<tr>
______<td style="height:100%;">
________<iframe src="http://www.google.es" style="height:100%; width:500px;"></iframe>
______</td></tr>
____<tr><td style="height:15px;">3</td></tr>
__</table>
</div>
</body>
</html>


El problema aparece con Internet Explorer (para variar), y se repite tanto con <iframe>, como con <div>, o <img>, o cualquier otra "cosa" que tenga "height:100%".
Cuando se le pone, a lo que sea, "height:100%", el elemento pasa a ocupar todo el alto disponible en la ventana, y no el alto de la <TD> en la que se inscribe ("lo que quede").
Es decir, pasa esto otro.


A ver si se os ocurre solución, que no sea pasarle un <javascript> tal que así:
window.onload=parcheIE;
function parcheIE()
{if(navigator.appName.indexOf('Explorer')!=-1)
___{document.getElementById('TR1').style.height=(parseFloat(document.getElementById('iframe').offsetHeight)-C)+'px';}
}


Os saluda, vuestro nuevo amigo.
Rizome
2007
^^

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 26 Dic 2007 05:11 pm
Prueba a ponerle style:="height:100%; margin:30px 0 15px 0;"

Por nachoseo

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Dic 2007 07:07 pm

nachoseo escribió:

Prueba a ponerle style:="height:100%; margin:30px 0 15px 0;"

¿A quién? ¿Al Iframe? El iframe ya tiene "height:100%" De hecho, todos los elementos, desde el "html" al "iframe", tienen "height:100%".

En cuanto al "margin..." ¿para qué le voy a poner margin? (de hecho, confirmo: he probado como me has dicho, y no: como imaginaba... tp funciona)
:(

Maldito IE...
:twisted:

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 27 Dic 2007 01:00 am
Por si a alguien le resulta útil, aquí está una alternativa, usando "DIV", opción siempre mejor frente a las tablas.
** QUEDE DICHO, QUE FUNCIONA EN FIREFOX, OPERA, e IEXPLORER7 (y creo que también en IE6)
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Top and Bottom Frames Layout</title>

<style type="text/css">
body {margin:0; padding:0;
____height:100%; max-height:100%; border:0;
____overflow:hidden;}

#frTop,
#frInf {position:absolute;
____top:0; left:0; border:blue 1px solid;
____width:100%; height:100px; /*AQUI SE PONE EL HEIGHT DE LA BARRA SUPERIOR*/
____overflow:hidden;}

#frInf {top:auto; bottom:0;
____height:30px; /*AQUI SE PONE EL HEIGHT DE LA BARRA INFERIOR*/}

#main {position:fixed;
____top:100px; bottom:30px; /*AQUI SE PONEN OTRA VEZ LOS HEIGHT SUPERIOR-INFERIOR*/
____left:0; right:0; border:red 1px solid;
____overflow:auto; }

/* IE6 hack */
* html body {padding:
100px 0 30px 0;} /*AQUI SE PONEN OTRA VEZ LOS HEIGHT SUPERIOR-INFERIOR*/
* html #main{height:100%; width:100%;}
/* IE6 hack */

</style>
</head>

<body>
<div id="frTop">
<h1>Barra superior</h1>
</div>
<div id="frInf">
Barra inferior
</div>
<div id="main">
Contenido principal
</div>
</body>
</html>
Adaptado del ejemplo de: Dynamic Drive CSS Library

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.