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?
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
Gunakan posisi CSS:absolut/relatif dalam kombinasi dengan CSS atas/bawah/kiri/kanan. Contoh:
<!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>
