Mengubah ukuran div secara dinamis berdasarkan ukuran jendela browser

Saya mencoba mencari cara untuk mengubah ukuran div secara dinamis, berdasarkan ukuran jendela browser. Saya telah menyiapkan jsbin yang menggambarkan masalah saya, di sini: http://jsbin.com/uxomul

Apa yang ingin saya lakukan adalah mengubah ukuran div yang menampung gambar sehingga div selalu mengisi apa yang tersisa dari tinggi jendela browser (kecuali margin 25px di bagian bawah, yang diatur pada body).

Berikut adalah demo yang mungkin menggambarkan apa yang ingin saya capai dengan lebih jelas: http://emilolsson.com/shop/demo/layers

Adakah ide apa yang akan menjadi cara terbaik untuk melakukan pendekatan ini?

Pemrograman
javascript html jquery css resize
3 Januari 2012 в 7:21
1 tampilan
Larutan

Anda bisa melakukan sesuatu seperti ini:

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

25 hanyalah contoh angka, misalnya margin Anda (Anda juga bisa mendapatkan ini secara dinamis)

Anda mungkin juga ingin membungkusnya ke dalam sebuah fungsi dan memanggil ini pada saat memuat halaman dan saat mengubah ukuran

Komentar (3)

Gunakan posisi CSS:absolut/relatif dalam kombinasi dengan CSS atas/bawah/kiri/kanan. Contoh:





            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; }






        <div id="head">
            <h1>Header</h1>
        </div>


        <div id="body">


            <div id="body-sidebar">
                <h2>Sidebar</h2>
            </div>


            <div id="body-content">
                <h2>Content</h2>



            </div>

        </div>
Komentar (2)

Anda dapat mencoba untuk mengikat event resize dari jendela browser.

Sebagai contoh:

window.onresize = function() {
//your code
}
Komentar (0)