بسم الله الرحمن الرحيم

Latar Belakang

Kalian pasti pernah melihat Footer yang manja di sebuah website.

Kira-kira seperti ini contohnya.

gambar_1

Perhatikan kotak berwarna merah.

Footer ini sangat manja karena menempel pada post body.


Saya ingin membuat Footer yang mandiri. Yang akan selalu berada di bagian bawah layar, meskipun body post tidak sebanyak tinggi layar.

Namun, saya juga tidak ingin membuat Footer ini terlalu keras kepala (Fixed), sehingga tetap berada di bawah layar meskipun post content sudah banyak.

Idealnya, Footer yang saya inginkan seperti ini.

gambar_2

Meskipun post content hanya sedikit, Footer tetap berada di bagian bawah layar. Dan apabila post content sudah banyak, Footer akan terdorong menghilang bersama post content yang paling bawah.

Implementasi

Markup HTML nya seperti ini polanya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
  <head>
    <title>Footer Anti Manja</title>
  </head>

  <body class="d-flex flex-column">

    <div id="content">
      ...
      ...
    </div>

    <footer id="footer">
      ...
      ...
    </footer>

  </body>
</html>


Style nya seperti ini.

1
2
3
4
5
6
7
8
9
10
11
12

html,
body {
  height: 100%;
}

#content {
  flex: 1 0 auto;
}

#footer {
  flex-shrink: none;
}

Pesan Penulis

Sepertinya, segini dulu yang dapat saya tuliskan.

Mudah-mudahan dapat bermanfaat.

Terima kasih.

(^_^)


Lisensi

logo_cc-by-nc-sa
Tulisan ini dilisensikan dengan :
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)

Penulis

bandithijo

My journey kicks off from reading textbooks as a former Medical Student to digging bugs as a Software Engineer – a delightful rollercoaster of career twists. Embracing failure with the grace of a Cat avoiding water, I've seamlessly transitioned from Stethoscope to Keyboard. Armed with ability for learning and adapting faster than a Heart Beat, I'm on a mission to turn Code into a Product.

- Rizqi Nur Assyaufi

d98d8237fef8f1017d0be931b6e291341cbe6ca8