Altura 100% menos el alto del menú en jquery

Literman · #1 (**permalink**) 11/09/2015, 22:31

Hola, ayuda con esto por favor, me gustaría resolverlo en jquery

Tengo un html con un #menu y un #contenido, uno encima del otros. Quiero que #contenido tenga el alto de 100% - el alto de #menu.

Probé con calc de CSS3 pero safari y IE no lo reconocen. Espero puedan ayudarme, dejo el código

Código HTML:

<body>
<header id="menu">
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
    </ul>
</header>

<div id="cuerpo"></div>
</body>

Código CSS:

Ver originalbody {
    margin:0;
}
 
#menu {
    margin:0;
    background:#DDD;
    padding:10px 0px;
}
 
#menu ul li {
    display:inline-block;
    background:#666;
    color:white;
}
 
#cuerpo {
    background:#0F0;
    height:200px;
}