How To

Cara Membuat Fixed Footer Pada Sebuah Website

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>

Hanifah Nurbaeti

Share
Tags: CSSHow To