div en plein écran qui correspond à la taille du navigateur

J'ai un document html avec des div et du css comme ceci:

<html>
<head>
    <title></title>
    <style text="text/javascript">
    body { padding:0px; margin:0px; }
    .full { background-color: yellowgreen; width: 100%; height: 100%; }
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; }
    .behindMenu { height: 50px; width: 100%; }
    .logo {width: 100%; height: 150px;}
    .content {background-color: yellow;}
    </style>
</head>
<body>
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</body>
</html>

Menu est fixe, behindMenu est de la même taille que le Menu et c'est derrière le menu. Puis j'ai le logo et la div avec la classe complète. Après le plein est une div avec la classe de contenu.

Lors de la visite de cette page, je veux que div complet sera (taille) entre le logo et le fond de la taille du navigateur. De sorte que le plein doivent avoir une hauteur entre le logo et le fond de la taille du navigateur, même si je redimensionner la fenêtre. Lorsque descendez ensuite l'utilisateur va voir Le reste du contenu.

Quelque chose comme ceci: http://strobedigital.com/

Ici est le violon: http://jsfiddle.net/2963C/

source d'informationauteur repincln | 2013-08-07