Latar Belakang
Kalian pasti pernah melihat Footer yang manja di sebuah website.
Kira-kira seperti ini contohnya.
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.
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

Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)
Penulis

BanditHijo adalah nama pena saya –meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Sistem operasi ini memberikan saya kebebasan untuk mengekspresikan ide-ide dalam membantu menyelesaikan pekerjaan saya sehari-hari.
- Rizqi Nur Assyaufi