Bagaimana cara menyimpan footer Anda di tempatnya?

Posting ini juga tersedia dalam bahasa Korea .

Footer adalah elemen terakhir di halaman. Minimal di bagian bawah viewport, atau lebih rendah jika konten halaman lebih tinggi dari viewport. Sederhana bukan? ?

Saat bekerja dengan konten dinamis yang menyertakan footer, terkadang masalah terjadi ketika konten pada halaman tidak cukup untuk mengisinya. Footer, daripada berada di bagian bawah halaman yang kita inginkan, naik dan meninggalkan ruang kosong di bawahnya.

Untuk perbaikan cepat, Anda benar-benar dapat memposisikan footer di bagian bawah halaman. Tapi ini datang dengan sisi negatifnya sendiri. Jika konten bertambah besar dari viewport, footer akan tetap 'menempel' ke bagian bawah viewport, baik kita mau atau tidak.

Ini menunjukkan perilaku yang tidak dan memang kita inginkan:

Mari kita lihat pendekatan untuk mencapai ini.

Kendalikan footer Anda

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

Jadi apa yang dilakukannya?

  • Itu page-containermengelilingi semua yang ada di halaman, dan menyetel tinggi minimumnya ke 100% dari tinggi viewport ( vh). Karena itu relative, elemen turunannya dapat diatur dengan absoluteposisi berdasarkan itu nanti.
  • The content-wrapmemiliki padding bawah yang tinggi footer, memastikan bahwa cukup persis ruang yang tersisa untuk footer dalam wadah mereka berdua di A pembungkus. divDigunakan di sini yang akan berisi semua konten halaman lainnya.
  • The footerdiatur untuk absolute, menempel bottom: 0dari page-containeritu adalah dalam. Ini penting, karena bukan absoluteke viewport, tetapi akan bergerak ke bawah jika page-containerlebih tinggi dari viewport. Seperti yang dinyatakan, tingginya, diatur secara sewenang-wenang di 2.5remsini, digunakan di content-wrapatasnya.

Dan begitulah. Footer Anda sekarang tetap di tempat yang Anda harapkan!

Sentuhan terakhir

Tentu saja, ini adalah CSS, jadi tidak akan lengkap tanpa beberapa pertimbangan UX khusus seluler, dan menggunakan pendekatan alternatif min-height: 100%daripada 100vh. Namun hal ini memiliki kekurangannya sendiri.

Flexbox (dengan flex-grow) atau Grid juga dapat digunakan, dan keduanya sangat bertenaga.

Metode mana yang Anda pilih sepenuhnya terserah Anda, dan spesifikasi desain Anda. Semoga contoh dan tautan di atas membantu Anda menghemat waktu dalam membuat keputusan dan menerapkannya.

Terima kasih sudah membaca. Berikut beberapa hal lain yang saya tulis baru-baru ini:

  • Panduan pemula untuk Layanan Kontainer Elastis Amazon
  • Menguji Bereaksi dengan Jest dan Enzim