Foros del Web - Ver Mensaje Individual

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