DTE :]

Tuesday, September 18, 2012

Apa Itu Sticky Footer?

Non Sticky Footer
Efek yang timbul pada ujung halaman jika tinggi halaman lebih pendek dari tinggi layar.

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 menempel 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 seperti itu pengertian sticky footer yang sebenarnya. Sticky Footer maksudnya adalah footer akan tetap berada di bawah layar meskipun tinggi halaman/dokumen lebih pendek dari tinggi layar. Sticky Footer digunakan untuk memastikan agar tampilan halaman yang rendah tidak tampak jelek saat berada pada device yang ukuran layarnya lebih tinggi dari ukuran halaman.

Berikut ini adalah sebuah demonstrasi footer biasa dimana di atasnya hanya terdapat beberapa teks, sehingga tinggi halaman tidak mampu meraih bagian bawah:

Lihat Demo

Bisa Anda lihat bahwa footer tampak menggantung di atas dan menjadikannya tidak menarik. Nah, Sticky Footer berguna untuk mengatasi masalah ini, untuk memastikan agar footer tetap berada di bawah meskipun tinggi halaman lebih rendah dari tinggi layar. Ini adalah contoh sticky footer:

Lihat Demo

Anda lihat bahwa meskipun tinggi halaman/dokumen lebih pendek dari tinggi layar, CSS Sticky Footer tetap menjaga agar halaman menekan ke sisi atas dan sisi bawah (dengan menggunakan ukuran tinggi dominan sebesar 100% pada masing-masing elemen) sehingga tidak akan ada ruang kosong yang tersisa di bagian bawah.

Masih Belum Yakin dengan Istilah Sticky Footer?

Cek situs ini ⇒ http://www.cssstickyfooter.com/

Pada bagian prolog sudah jelas tertulis, "It Sticks to the Bottom of the Page!", bukan "It Sticks to the Bottom of the Window!"

Dan ini adalah 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 tepat 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 jika 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 menggunakan Sticky Footer.

Saat tinggi halaman sudah melebihi tinggi layar, maka efek Sticky Footer akan menghilang. Dan CSS Sticky Footer sudah tidak ada gunanya lagi saat itu:

Lihat Demo

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

Labels: , , ,

posted by Taufik Nurrohman at September 18, 2012

13 Comments:

Post a Comment



<< Home