Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy
Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan belajar membuat footer menempel ke bawah dengan rapi, tanpa menggunakan CSS yang ribet-ribet. Yuk disimak.. :)
Salam jagocoding,, akhir-akhir ini saya pusing mau bikin tutorial CSS tentang apa lagi nih.. Mungkin kalo ada yang punya masukan sesuatu yang pengen dibahas bisa dicomment.. Hehehe.. :p Kali ini saya mau share salah satu teknik layouting CSS yang cukup penting, yaitu bagaimana membuat layout footer yang tetap diam dibawah walaupun kontennya sedikit. Teknik yang digunakan dalam hal ini pun nggak susah.. Jadi saya jamin pemula pun bisa memanfaatkan teknik ini untuk dikembangkan lebih lanjut.. :)
Pertama-tama, kita buat dulu struktur HTML seperti ini,
Selanjutnya, kita desain saja dulu websitenya seperti biasa di CSS.. Supaya lebih rapi, saya sarankan menggunakan CSS Reset seperti *{margin:0px auto;}. *{margin:0px auto;} #container{ position:relative; } #header{ background:#0cf; padding:10px; }
#content{ padding:10px; } #footer{ height:50px; line-height:50px; background:#333; color:#fff; } Saya jelaskan dulu satu persatu ya.. layer #container diberikan position:relative karena layer tersebut akan digunakan untuk menampung layer-layer lainnya lagi seperti layer header, content dan footer. sisanya di layer header, content dan footer itu hanya berisi hiasan berupa background, padding, dan warna tulisan. line-height yang disamakan dengan height di bagian footer itu berfungsi supaya tulisan tidak menempel ke atas, tapi di tengah-tengah layer. Nah, tampilan desain awalnya seperti ini :
Seperti yang kita lihat di screenshot,, karena kontennya cuma sedikit footernya nggak mau menempel ke bawah halaman. Jadi terlihat seperti bagian kosong yang nggak enak dilihat. Perhatikan langkah-langkah berikut ini supaya bisa membuat footer yang menempel ke bawah. Pertama, masukkan CSS berikut ini di baris pertama setelah CSS Reset. html,body{ height:100%; } Tujuannya adalah supaya secara default tinggi website adalah 100% dari layar. Setelah itu, di layer #container tadi ditambahkan min-height:100%; .
#container{ min-height:100%; position:relative; } min-height ini hanya berlaku jika tinggi container sesungguhnya lebih pendek dari 100% (seperti screenshot pertama). Sehingga dengan min-height ini tinggi container paling kecilnya adalah 100% dari layar, dan menyesuaikan dengan otomatis kalau lebarnya lebih dari 100%. Untuk membuktikannya, layer #footer kita berikan position:absolute, dan bottom:0px; supaya posisi footer mau menempel dibawah. dan lihat bagaimana hasilnya,, #footer{ height:50px; line-height:50px; background:#333; color:#fff; position:absolute; bottom:0px; }
Nah,, lokasi footernya sudah mau menempel ke bawah nih kalau kontennya sedikit (gbr 1).. Tapi disini kita ketemu masalah, footernya jadi menutupi sebagian dari layer content kalau isinya mulai banyak nih (gbr 2).. Untuk mengatasi itu, layer #content harus kita berikan padding-bottom yang sama atau lebih besar dari tinggi footer. Sebagai contoh, tinggi footer yang saya gunakan adalah 50px, maka nilai padding-bottom yang harus saya berikan di layer #content adalah 50px, atau sedikit lebih besar dari 50px; #content{
padding:10px; padding-bottom:60px; /*sama atau lebih besar dari tinggi footer*/ } Eits,, sebelum kelupaan, kayaknya footernya agak jelek ya kalau nggak memenuhi layar.. kita kasih width 100% aja sekalian di footer supaya hasil akhirnya nanti benar-benar optimal.. :D #footer{ height:50px; line-height:50px; background:#333; color:#fff; position:absolute; bottom:0px; width:100%; /*biar memenuhi layar*/ } Didapatlah hasil akhir seperti ini~
Sekian tutorial dari saya, semoga dapat dimengerti dan bermanfaat bagi kita semua.. :)
Tentang Penulis Christian Rosandhy
