Friday, August 08, 2014

Membuat div height 100% sesuai dengan jendela browser

Membuat template dua kolom secara manual kadang kita menemukan tinggi elemen div sidebar tidak sesuai dengan tinggi elemen div pada konten. Untuk mengatasi agar keduanya sama tinggi dengan jendela browser, kita dapat mengunakan kode viewport pada CSS3.

Kode viewport pada CSS3 adalah vh (viewport height), vw (viewport width), vmin (viewport minimum length) dan vmax (viewport maximum length).

Bagaimana cara penggunaannya?
1vh = 1% jadi 100vh = tinggi jendela browser.

CSS

body {
    margin:0;     /* mengubah margin standar browser ke 0px */
    height:100vh; /* Untuk mengatasi bug pada google chrome */
    width:100vw;  /* Untuk mengatasi bug pada google chrome */
}
div {
    height:100vh;
    width:50vw;
}
#konten {
    background:#fe6602;
    float:left;
}

#sidebar {
    background:#4679bd;
    float:right;
}

HTML

<div id="konten">
    isi konten
</div>
<div id="sidebar">
    isi sidebar
</div>