Hola compañeros/as:
Llevo varios días dándole vueltas a la idea de simular con IFRAMEs y CSS (sin recurrir a JavaScript) un FRAMESET clásico, de los de toda la vida, que mezcle alturas en píxeles y porcentajes. Algo como esto:
Código:
<frameset rows="50, 100%" border="0" noresize="noresize">
<frame src="page1.html" />
<frame src="page2.html" />
</frameset>
Este código dibujaría 2 cuadros uno encima del otro. El primero con 50 píxeles de alto y el segundo ocupando el resto de la altura del visor. Si dicho visor (ventana del navegador en este caso) se redimensiona, también lo hará este cuadro.
Pues bien, el caso es que he tratado de simularlo primero mediante una estructura como la siguiente:
Código:
* { margin: 0px; padding: 0px; }
html, body { height: 100%; }
iframe { width: 100%; height: 50px; border: none; }
iframe + iframe { height: 100%; }
<body>
<iframe src="page1.html"></iframe>
<iframe src="page2.html"></iframe>
</body>
Lógicamente el segundo cuadro coge como altura TODA la del documento, no sólo la restante, por lo que esta aproximación ha resultado inválida ya que causa un desplazamiento extra de 50 píxeles hacia abajo correspondientes a la altura del primer cuadro.
Aplicando la propiedad CSS "overflow" a BODY o HTML lo más que puedo hacer es esconder el contenido parcialmente, cosa que no deseo, ya que el IFRAME puede mostrar barras de desplazamiento y quedarían tapadas completa o parcialmente.
He estado pensando sobre elementos HTML anidados cuya altura pueda venir limitada automáticamente por el elemento contenedor o padre, y el primero y único que me viene a la cabeza es TABLE y sus subelementos, como TR, TD, etc.:
Código:
* { margin: 0px; padding: 0px; }
html, body { height: 100%; }
table { width: 100%; height: 100%; }
tr:first-child td { height: 50px; }
iframe { width: 100%; height: 100%; border: none; }
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<iframe src="page1.html"></iframe>
</td>
</tr>
<tr>
<td>
<iframe src="page2.html"></iframe>
</td>
</tr>
</table>
</body>
Las dimensiones del segundo cuadro no son válidas debido a que, aunque la segunda fila y celda cubren el espacio restante del documento, no tienen una altura establecida explícitamente mediante CSS (se le deja que rellene la altura restante de forma dinámica).
¿Y si le pongo altura del 100% a la segunda celda? Pues se supone que una celda se comporta según lo establecido por el atributo CSS "display: table-cell" y que ese 100% de altura, pese a rebosar la tabla, jamás podría salir fuera de los límites de ésta cuando ella misma tiene ya una altura establecida. Así que la celda sólo crecería hasta lo permitido por dicha tabla (cosa que en elementos anidados de tipo "block" o "inline" no ocurriría).
Esto en las últimas versiones de Firefox y Safari funciona, pero en Internet Explorer y Opera no. La celda acaba forzando a la tabla a "desbordar". He probado en IE7 sólo por curiosidad y ni eso llega a hacer.
¿Se os ocurre una forma compatible con todas las últimas versiones de navegador para obtener algo así? Quizá la solución sea sencilla y me haya obcecado en conseguirla de una manera concreta.
Muchas gracias :) .