Membuat Layout Footer Melekat Ke Bawah

26 views

Salam jagocoding,, akhir-akhir ini saya pusing mau bikin tutorial CSS perihal apa lagi nih.. Mungkin kalo ada yang punya masukan sesuatu yang pengen dibahas sanggup dicomment.. Hehehe..

Kali ini saya mau share salah satu teknik layouting CSS yang cukup penting, yaitu bagaimana menciptakan layout footer yang tetap membisu dibawah walaupun kontennya sedikit. Teknik yang dipakai dalam hal ini pun nggak susah.. Kaprikornus saya jamin pemula pun sanggup memanfaatkan teknik ini untuk dikembangkan lebih lanjut..

 

Pertama-tama, kita buat dulu struktur HTML ibarat ini,

<div id="container"><div id="header"><h1>Layout Footer Menempel Ke Bawah</h1></div><div id="content"><!--Bisa diisi teks lorem ipsum dibagian ini--></div><div id="footer">Copyright &copy; 2014Designed by ..............</div></div>

Selanjutnya, kita desain saja dulu websitenya ibarat biasa di CSS.. Supaya lebih rapi, saya sarankan memakai CSS Reset ibarat  *{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 sebab layer tersebut akan dipakai untuk menampung layer-layer lainnya lagi ibarat 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 belahan footer itu berfungsi supaya goresan pena tidak melekat ke atas, tapi di tengah-tengah layer.

Nah, tampilan desain awalnya ibarat ini :

Seperti yang kita lihat di screenshot,, sebab kontennya cuma sedikit footernya nggak mau melekat ke bawah halaman. Kaprikornus terlihat ibarat belahan kosong yang nggak lezat dilihat. Perhatikan langkah-langkah berikut ini supaya sanggup menciptakan footer yang melekat ke bawah.

Pertama, masukkan CSS berikut ini di baris pertama sehabis CSS Reset.

html,body{height:100%;}

Tujuannya ialah supaya secara default tinggi website ialah 100% dari layar.
Setelah itu, di layer #container tadi ditambahkan min-height:100%; . 

#container{min-height:100%;position:relative;}

min-height ini hanya berlaku kalau tinggi container tolong-menolong lebih pendek dari 100% (seperti screenshot pertama). Sehingga dengan min-height ini tinggi container paling kecilnya ialah 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 melekat dibawah. dan lihat bagaimana hasilnya,,

#footer{height:50px;line-height:50px;background:#333;color:#fff;position:absolute;bottom:0px;}

Nah,, lokasi footernya sudah mau melekat 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 ialah 50px, maka nilai padding-bottom yang harus saya berikan di layer #content ialah 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 buruk ya kalau nggak memenuhi layar.. kita kasih width 100% aja sekalian di footer supaya hasil hasilnya nanti benar-benar optimal.. 😀

#footer{height:50px;line-height:50px;background:#333;color:#fff;position:absolute;bottom:0px;width:100%; /*biar memenuhi layar*/}

Didapatlah hasil simpulan ibarat ini

Author: 
    author
    No related post!