Kode CSS untuk Membuat Sticky Footer
Sticky Footer adalah istilah dalam design website khususnya berkenaan dengan bagian footer, salah satu bagian yang sering ditemui pada sebagian besar website. Bagian footer biasanya berisi hal-hal seperti informasi hak cipta, kredit, dan lain-lain. Footer, sesuai namanya terdapat di paling bawah berimpit dengan batas bawah browser.
Mendesign footer tidak begitu sulit karena keberadaannya tidak langsung terlihat, terutama untuk halaman dengan konten yang panjang secara vertikal. Tapi akan langsung nampak di layar oleh pengunjung jika konten sedikit. Pada beberapa website, hal ini mengakibatkan footer terlihat menggantung jauh dari bagian bawah browser.
Kondisi design footer seperti gambar di atas kurang enak dipandang mata. Coba bandingkan dengan gambar di bawah ini, bagian footer tetap berada di posisi paling bawah walaupun bagian terakhir tulisan tidak berimpit dengan batas atas footer.
Posisi footer seperti pada gambar di atas hanya terjadi jika konten tidak mencapai batasan footer. Jika halaman ini ditampilkan pada layar dengan lebar yang lebih sempit -misalnya pada tablet atau smartphone- tulisan akan bertambah panjang secara vertikal sehingga mendorong footer ke bawah layar seperti pada gambar di bawah ini (perhatikan bahwa footer tampil setelah discroll).
Jika Anda menggunakan template buatan orang lain, Anda bisa mengecek sendiri apakah template tersebut sudah menggunakan sticky footer atau belum dengan membuat satu halaman yang memuat beberapa baris saja tulisan. Cek apakah dengan konten yang sedikit tersebut footer menempel ke konten dan renggang terhadap bagian bawah browser atau menempel ke bagian bawah browser dan berjarak dari bagian akhir konten.
Jika Anda membuat sendiri template website Anda atau menguasai kode-kode template yang Anda gunakan serta belum menggunakan sticky footer, berikut ini adalah contoh kode CSS dan kode HTML untuk membuat sticky footer.
Kode CSS
html{
min-height:100%;
position:relative;
}
body{
margin:0 0 60px;
}
footer{
bottom:0;
clear:both;
left:0;
line-height:60px;
position:absolute;
width:100%;
}
Kode HTML
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
Bagian Footer
</footer>
</body>
Sebagai informasi, sticky footer di website ini menggunakan kode di atas dan berhasil bekerja dengan baik. Selain menggunakan kode di atas, untuk membuat sticky footer bisa juga dengan menggunakan flexbox.
Oleh Opan
Dibuat 24/01/2017
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.
| ⇐ | Beberapa Hal Berikut Ini Ditemukan Secara Tidak Sengaja | Fenomena Jual Beli Artikel untuk Mengisi Konten Website atau Blog | ⇒ |
Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.