web-dev-qa-db-fra.com

Redimensionner dynamiquement div en fonction de la taille de la fenêtre du navigateur

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?

javascriptjqueryhtmlcssresize
9
INT

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.

11
Ortiga

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>
7
F i L

Vous pouvez essayer de lier l'événement de redimensionnement de la fenêtre du navigateur.

Par exemple:

window.onresize = function() {
//your code
}
6
scripto

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%
}
1
Tarek