[SOLUCIONADO] Altura 100% menos el alto del menú

[PericoLangostino]

Hola a todos/as! Estoy haciendo una web responsive y me gustaría saber como crear un div para ocupar el 100% del alto de una página menos el alto del menu. Ya que depende de la pantalla en la que se visualice la web tendrá más o menos espacio disponible y yo quiero ocupar todo el restante.

No sé si me explico. Aquí os dejo una img:


Gracias de antemano

[NueveReinas]

Yo lo hago con jQuery: http://jsfiddle.net/nupeksop/

Código HTML:

<header class="menu">
    <ul>
        <li>Inicio</li>
        <li>Pag 2</li>
        <li>Pag 3</li>
    </ul>
</header>
 
<div class="contenido">
</div>
 

Código CSS:

body {
    margin:0;
}
 
.menu {
    position:relative;
    margin:0;
    background:#DDD;
    padding:10px 0px;
}
 
.menu ul li {
    display:inline-block;
    background:#666;
    color:white;
}
 
.contenido {
    position:relative;
    background:blue;
    height:500px;
    margin:0;
}
 

Código Javascript:

var altofinal = $('.menu').outerHeight();
$(".contenido").css("margin-top", altofinal - altofinal);
 

[mbm150]

Hola,

si sabes la altura del menu puedes usar:

Código CSS:

div{
     height: calc(100% - 75px);
     /*los 75px son la altura del menu, puede ser en % o lo que sea*/
}
 

Si no lo sabes o varia segun el tamaño pues tendras que usar javascript:

Código Javascript:

function altura(){
     var content = document.getElementById("content");
     var am = document.getElementById("menu").clientHeight;
     var aw = window.clientHeight;
     content.style.height = (aw - am) + "px";
}
window.addEventListener("load", altura, false);
 

No lo he probado pero seria algo asi.

Saludos.

[pzin]

Vaya forma de complicarse.

Código HTML:

<div id="azul">
  <div id="gris"></div>
  <div id="contenido"></div>
</div>
 

Código CSS:

html, body, #azul {
  height: 100%;
}
 

[PericoLangostino]

Muchas gracias a todos/as! Todas las soluciones funcionan. Me quedo con la mas simple. Gracias y hasta pronto!