Cara Membuat Fixed Footer / Sticky Footer

Pernahkah kalian mengalami footer blog Anda menjadi naik ke atas saat laman blog Anda hanya berisi sedikit konten atau bahkan kosong ? Untuk itu, sekarang saya ingin berbagi tips dan trik tentang membuat footer berada di bawah meskipun konten kosong. Agar lebih jelas, bisa melihat demo :



Demo on JSFiddle: https://jsfiddle.net/AlanMSM/8y73pp6u/1/embedded/result/
Demo on Blog: http://www.msm.web.id/p/blog-page_80.html

Ingin membuat footer Anda diam di bawah seperti pada demo? Simak penjelasan berikut:

Trik Mudah Membuat Sticky Footer
Sebelumnya kita akan pahami dulu kunci dari trik ini.

Pahami position:absolute

Pernahkah Anda menggunakan elemen CSS position:absolute? Nah elemen CSS ini berfungsi untuk membuat objek memiliki posisi yang bebas yang relatif terhadap induk (parent) yang menggunakan elemen CSS position:relative. Nah hal inilah yang akan kita manipulasi untuk membuat sticky footer.

Memulai Manipulasi

Kita ingin footer kita berada pada bagian bawah laman bukan? Nah untuk itu kita harus membuat patokan di manakah bagian bawah website kita dengan menambahkan atribut CSS position:relative, nah elemen tersebut pastinya adalah elemen terluar website/blog Anda yaitu elemen html (<html>), lalu buat footer website kita bergerak bebas dengan menambahkan position:absolute dan juga bottom:0, left:0, dan right:0, untuk membuatnya berada di bawah dan memiliki lebar penuh. Untuk itu, tambahkan CSS berikut, simpan di atas </b:skin> atau </style> :


html   {
position: relative;
min-height: 100%
}
#footer-wrapper, footer {
position: absolute;
bottom: 0;
left:0;
right:0;
}

Sekarang cek tampilan blog Anda, apakah footer sudah berada di bawah? Pasti jawabannya ya, namun pada laman yang memiliki banyak konten, footer menutupi sebagian konten laman, nah untuk itu, kita harus membuat footer memiliki tinggi yang tetap (ditentukan elemen CSS height:) agar bisa memberikan patokan jarak kepada elemen laman dengan margin-bottom:, untuk itu tambahkan CSS berikut mengantikan CSS tadi :


html   {
position: relative;
min-height: 100%;
}
body   {
margin-bottom: 200px; /*Samakan dengan tinggi footer*/
}
#footer-wrapper, footer {
height: 200px; /* Ubah denga tinggi footer yang diinginkan */
position: absolute;
bottom: 0;
left:0;
right:0;
}

Nah, Anda tinggal menyesuaikan tinggi footer sesuai dengan yang Anda inginkan, dan sekian dari saya, ada kesulitan? Jangan ragu untuk bertanya melalui komentar.
Postingan ini dikirim oleh:

Saya adalah admin blog www.msm.web.id. I'm Mochamad Syarief Maulana, but you can call me alan.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments