iframe en resto de página

saulortega · #1 (**permalink**) 04/08/2012, 17:42

Hola. No sé si esto es una tontería, pero lo que pensé que era algo muy sencillo de hacer, no me ha funcionado.

Quiero crear algo como esto: http://themeforest.net/item/elegance...review/2781565

Una página con una barra horizontal superior y un iframe que ocupe todo el resto de la página. La anchura funciona bien, pero si le indico que tome una altura de 100%, toma la altura de toda la ventana del navegador, asea que se crean dos barras de desplazamiento vertical, una en el iframe, y otra fuera del iframe...

No sé si me hice entender...

Esto es lo que tengo:

Código HTML:

<html>
<head>
<style type="text/css">
#superior {
	height: 100px;
	background-color: #aaa;
}

#iframe {
	width: 100%;
	height: 100%;
}
</style>

</head>

<body>

<div id="superior">
Bla bla bla...
</div>

<iframe id="iframe" scrolling="auto" src="http://www.linux.org/" name="marco" frameborder="0"  noresize="noresize"></iframe>

</body>
</html>

Si le pongo auto a la altura, me lo muestra sólo de unos 150 px, más o menos...

emprear · #2 (**permalink**) 04/08/2012, 19:28

revisá el código fuente del ejemplo que mostrás, utiliza javascript(jQuery para fijar el iframe) caso contrario tenés que usar medidas relativas para el alto del pie , el footer y el iframe, y siempre asignando 100% al height del html,body
Las barras de desplazamiento se controlan con overflow en ambos body

Saludos

saulortega · #3 (**permalink**) 05/08/2012, 13:27

Ya encontré un código que sí funciona: http://www.forosdelweb.com/f53/simul...7/#post3018955

i72 · #4 (**permalink**) 19/08/2012, 04:08

Muy buenas, a mi se me presenta el siguiente problema, quiero crear dos iframes, uno superior y otro que ocupe el resto de la pagina, y utilizo esto:

<iframe id="iframetop" scrolling="no" style="border:none" src="superior.html" height="205px" width="100%" ></iframe>

<iframe id="iframebottom" scrolling="no" style="border:none" src="inferior.html" height="*" width="100%" ></iframe>

El "iframetop" me lo crea perfectamente pero el "iframebottom" me crear un iframe de unos 200px cosa que no entiendo xq deberia crearlo x el tamaño total restante de la pagina activa.

NOTA:

html, body
{
height: 100%;
}

Muchas gracias.