Tamaño de iframes

kaspito · #1 (**permalink**) 29/02/2012, 15:27

tengo un iframe en la parte superior de mi web:

Código HTML:

<iframe src="top_navigation_menu/menu.html" id = "11" name = "topmenu" style="position:absolute;top:0%;left:0px;width:100%;height:100px;z-index:999" frameborder="no"></iframe>

hasta ahi genial, el problema es que bajo ese primer frame tengo otro, que quiero que ocupe el resto de la página, el problema es que no se que poner en el parámertro "height" porque en pixels no puede ser ya que entonces se quedaria corto segun la pantalla y si lo pongo en 100% ocupa mas que el total de la pantalla. he probado con : height:100%-100px pero nada. no tengo ni idea de que poner.

Código HTML:

<iframe src="home.php" id = "mainframe" name = "mainframe" style="position:absolute;top:100;left:0;width:100%;height:100%;z-index:999" frameborder="no">

herzbazi · #2 (**permalink**) 29/02/2012, 18:18

tienes que utilizar css amigo

z-index:;

emprear · #3 (**permalink**) 29/02/2012, 20:00

Podés hacer algo asi

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
html, body{
padding: 0;
margin: 0;
height:100%;
border: none;
background-color: green;
overflow: hidden;
}
iframe {
padding: 0;
margin: 0;
}
div#uno {
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
background-color: blue;
position: absolute;
z-index: 999;
}
 
div#dos{
width: 100%;
height: 100%;
padding-top: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
z-index: 1;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
 
div#dos iframe {
height: 100%;
}
/*]]>*/
</style>
</head>
<body>
<div id="uno">
<iframe src="http://emprear.com" width="100%" height="100" frameborder="0"></iframe>
</div>
<div id="dos">
<iframe src="http://forosdelweb.com" width="100%" frameborder="0" scrolling="auto"></iframe>
</div>
</body>
</html>

los colores de fondo estan para referencia. En IE vas a notar que no llega exactamente al 100% de alto (un 99.9 digamos)
la clave esta en
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

ya que integra los 100px de padding-top del div 2 en el alto de la misma, y no los añade.

Saludos

kaspito · #4 (**permalink**) 02/03/2012, 10:26

buahhh muchisimas gracias, muy util.
la cosa es que mi problema no acaba aqui, tengo otro frame que está en el lateral (del mismo modo que con el de arriba pero en el lado izquierdo) y me desplaza el frame central hacia la derecha de manera que no puedo ver la scrillong bar.

alguna idea de como evito eso?