it-swarm.com.de

Ändern Sie dynamisch die Größe von div basierend auf der Größe des Browserfensters

Ich versuche herauszufinden, wie man die Größe eines div dynamisch ändert, basierend auf der Größe des Browserfensters. Ich habe ein Jsbin eingerichtet, das mein Problem veranschaulicht, hier: http://jsbin.com/uxomul

Was ich tun möchte, ist die Größe des divs zu ändern, das die Bilder enthält, sodass das div immer die verbleibende Höhe des Browserfensters ausfüllt (außer einem 25px-Rand unten, der auf body gesetzt ist). 

Hier ist eine Demo, die vielleicht veranschaulicht, was ich klarer erreichen möchte: http://emilolsson.com/shop/demo/layers

Irgendwelche Ideen, was wäre der beste Weg, um dies zu erreichen?

9
INT

Sie können so etwas tun:

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 ist nur eine Probennummer, zum Beispiel Ihre Marge (Sie können dies auch dynamisch erhalten)

Sie können es auch in eine Funktion einschließen und diese sowohl beim Laden der Seite als auch beim Ändern der Größe aufrufen

11
Ortiga

CSS-Position verwenden: absolut/relativ in Kombination mit CSS oben/unten/links/rechts. Beispiel:

<!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

Sie können versuchen, an das Größenänderungsereignis des Browserfensters zu binden.

Zum Beispiel:

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

Die Position muss festgelegt werden, damit die Größe automatisch angepasst wird.

Wenn sich die Bildschirmhöhe zur Laufzeit geändert hat

Fügen Sie dies in CSS-Tabelle ein:

#FitScreenHeight
{
    position:fixed
    height:100%
}
1
Tarek