Karena Saya lihat masih banyak yang salah paham dengan istilah Sticky Footer, jadi Saya akan membahasnya. Kebanyakan orang menganggap bahwa sticky footer itu artinya footer melekat di bawah layar dan akan tetap berada pada posisinya meskipun layar digulung.
Baiklah, memang bisa dibilang begitu, mengingat kata 'stick' juga berarti 'menempel'. Tapi bukan ibarat itu pengertian sticky footer yang sebenarnya. Sticky Footer maksudnya ialah footer akan tetap berada di bawah layar meskipun tinggi halaman/dokumen lebih pendek dari tinggi layar. Sticky Footer dipakai untuk memastikan supaya tampilan halaman yang rendah tidak tampak buruk dikala berada pada device yang ukuran layarnya lebih tinggi dari ukuran halaman.
Berikut ini ialah sebuah demonstrasi footer biasa dimana di atasnya hanya terdapat beberapa teks, sehingga tinggi halaman tidak bisa meraih bab bawah:
Bisa Anda lihat bahwa footer tampak menggantung di atas dan menjadikannya tidak menarik. Nah, Sticky Footer mempunyai kegunaan untuk mengatasi problem ini, untuk memastikan supaya footer tetap berada di bawah meskipun tinggi halaman lebih rendah dari tinggi layar. Ini ialah referensi sticky footer:
Anda lihat bahwa meskipun tinggi halaman/dokumen lebih pendek dari tinggi layar, CSS Sticky Footer tetap menjaga supaya halaman menekan ke sisi atas dan sisi bawah (dengan memakai ukuran tinggi mayoritas sebesar 100% pada masing-masing elemen) sehingga tidak akan ada ruang kosong yang tersisa di bab bawah.
Masih Belum Yakin dengan Istilah Sticky Footer?
Cek situs ini ⇒ http://www.cssstickyfooter.com/
Pada bab prolog sudah terang tertulis, "It Sticks to the Bottom of the Page!", bukan "It Sticks to the Bottom of the Window!"
Dan ini ialah halaman demonstrasi tampilan footer biasa beserta masalahnya, yang juga terdapat pada sub-halaman dari situs tersebut: http://www.cssstickyfooter.com/non-stick-footer.html
Sticky Footer bukan berarti bahwa footer melayang di bawah layar. Sticky Footer lebih sempurna dikatakan sebagai metode untuk memastikan footer tetap berada di bawah halaman meskipun tinggi halaman lebih pendek dari tinggi layar. Sticky Footer hanya akan terlihat efeknya kalau tinggi halaman lebih pendek dari tinggi layar. Jika tinggi halaman tidak lebih pendek dari tinggi layar (atau katakanlah: Jika Anda bisa memastikan bahwa halaman situs Anda tidak pernah lebih pendek dari tinggi layar), maka Anda tidak perlu memakai Sticky Footer.
Saat tinggi halaman sudah melebihi tinggi layar, maka imbas Sticky Footer akan menghilang. Dan CSS Sticky Footer sudah tidak ada gunanya lagi dikala itu:
CSS & HTML Sticky Footer
HTML
<div id="wrap"> <section id="main"> ... </section> </div> <footer id="footer"></footer>CSS
/** * Sticky Footer Solution * by Steve Hatcher * http://stever.ca * http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* Must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body { height:100%; } #wrap { min-height:100%; } #main { overflow:auto; padding-bottom:180px; /* must be same height as the footer */ } #footer { position:relative; margin-top:-180px; /* negative value of footer height */ height:180px; clear:both; } /* Opera Fix */ body:before { /* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px; /* thank you Erik J - negate effect of float */ }Tambahan Untuk Internet Explorer
<!-- You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher... --> <!--[if !IE 7]> <style> #wrap {display:table;height:100%} </style> <![endif]-->