Foros del Web - Ver Mensaje Individual

emprear · #6 (**permalink**) 09/04/2012, 19:22

Esto te puede servir

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[*/
 
/* estilos */ 
 
html, body {
height: 100%;
border: none;
padding: 0;
margin: 0;
}
 
#head{
height: 40px;
width: 100%;
position: absolute;
background-color: #ccc;
z-index: 999;
}
 
#box {
position: absolute;
top:0;
left: 0;
height: 100%;
width: 100%;
padding-top: 40px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
background-color: lime;
}
 
/*]]>*/
</style>
</head>
<body>
<div id="box">Altura: lo que queda de pantalla</div>
<div id="head">tiene 40px de alto</div>
</body>
</html>

Con la propiedad box-sizing integrás el padding(top) de 40px en el alto evitando que se sumen al 100%, el z-index no es imprescindible si mantenes ese orden, pero no está demás ponerlo

SAludos