Di bawah ini kita akan mempelajari cara membuat fixed footer atau sticky footer dengan CSS.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: gold; color: white; text-align: center; } </style> </head> <body> <h2> Contoh Fixed/Sticky Footer </h2> <p>Footer ditempatkan di bagian bawah halaman.</p> <div class="footer"> <p>Footer</p> </div> </body> </html>
Cara Membuat Fixed Footer
Langkah 1) Tambahkan HTML:
Contoh
<div class="footer"> <p>Footer</p> </div>
Langkah 2) Tambahkan CSS:
Contoh
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: gold;
color: white;
text-align: center;
}
</style>