J'essaie de comprendre comment redimensionner dynamiquement une div en fonction de la taille de la fenêtre du navigateur. J'ai mis en place un jsbin qui illustre mon problème, ici: http://jsbin.com/uxomul
Ce que je veux faire est de redimensionner la div qui contient les images afin que la div remplisse toujours ce qui reste de la hauteur de la fenêtre du navigateur (sauf une marge de 25 pixels au bas qui est définie sur le corps).
Voici une démo qui illustre peut-être plus clairement ce que je veux réaliser: http://emilolsson.com/shop/demo/layers
Des idées quelle serait la meilleure façon d'aborder cela?
Vous pouvez faire quelque chose comme ça:
var width = $(window).width() - 25;
$("#mydiv").width(width);
25 est juste un numéro d'échantillon, par exemple votre marge (vous pouvez aussi l'obtenir de manière dynamique)
Vous pouvez aussi vouloir l’envelopper dans une fonction et l’appeler à la fois lors du chargement de la page et lors du redimensionnement.
Utilisez la position CSS: absolute/relative en combinaison avec CSS top/bottom/left/right. Exemple:
<!doctype html>
<html>
<head>
<style>
html, body { margin:0; padding:0; width:100%; height:100%; }
#head { width:100%; height:100px; background:black; color:white; }
#head > h1 { margin:0; }
#body { position:absolute; width:100%; top:100px; bottom:25px; background:red; }
#body > div { position:absolute !important; }
#body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; }
#body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; }
#body-content > img { margin:25px; width:500px; vertical-align:middle; }
</style>
</head>
<body>
<!-- Head -->
<div id="head">
<h1>Header</h1>
</div>
<!-- Body -->
<div id="body">
<!-- Sidebar -->
<div id="body-sidebar">
<h2>Sidebar</h2>
</div>
<!-- Content -->
<div id="body-content">
<h2>Content</h2>
<img src="http://dl.dropbox.com/u/3618143/image1.jpg" />
<img src="http://dl.dropbox.com/u/3618143/image2.jpg" />
<img src="http://dl.dropbox.com/u/3618143/image3.jpg" />
</div>
</div>
</body>
</html>
Vous pouvez essayer de lier l'événement de redimensionnement de la fenêtre du navigateur.
Par exemple:
window.onresize = function() {
//your code
}
La position doit être corrigée pour être redimensionnée automatiquement.
Si la hauteur de l'écran a changé au moment de l'exécution
Mettez ceci dans la feuille CSS:
#FitScreenHeight
{
position:fixed
height:100%
}