Ditulis oleh: Ditulis pada: 4/09/2015
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.