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
Vous devez vous connecter pour publier un commentaire.
HTML
CSS
Il existe une solution simple pris en charge par tous les navigateurs modernes.
La seule exception notable est la Android 4.3 ci-dessous - mais seulement dans le système de navigateur (Chrome fonctionne ok).
Prise en charge du navigateur graphique: http://caniuse.com/viewport-units
Ici est de jouer avec la solution
http://jsfiddle.net/agrawal_rupesh/b7gwK/
Malheureusement
vh
etvw
est très buggy avec l'iPhone, mais à peu près tous les navigateurs (et remontent à une époque) est heureux de faire quelques calculs pour vous: