Catatan ini juga terdapat dalam bahasa Korea .
Footer adalah elemen terakhir di halaman. Sekurang-kurangnya ia berada di bahagian bawah viewport, atau lebih rendah jika kandungan halaman lebih tinggi daripada viewport. Ringkas, bukan? ?
Semasa bekerja dengan kandungan dinamik yang merangkumi footer, masalah kadang-kadang berlaku apabila kandungan di halaman tidak mencukupi untuk mengisinya. Footer, daripada tinggal di bahagian bawah halaman di mana kita mahu ia kekal, bangkit dan meninggalkan ruang kosong di bawahnya.
Untuk memperbaiki cepat, anda boleh meletakkan footer di bahagian bawah halaman. Tetapi ini datang dengan kelemahannya sendiri. Sekiranya kandungan tumbuh lebih besar daripada viewport, footer akan tetap 'tersekat' ke bahagian bawah viewport, sama ada kita mahu atau tidak.
Ini menunjukkan tingkah laku yang tidak kita dan mahukan:

Mari kita lihat pendekatan untuk mencapainya.
Membuat kawalan kaki anda terkawal
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 ini?
- Yang
page-container
berlaku di sekeliling segala-galanya pada halaman, dan menetapkan ketinggian minimum kepada 100% daripada ketinggian viewport (vh
). Seperti yang adarelative
, elemen anaknya dapat diatur denganabsolute
kedudukan berdasarkannya nanti. - Yang
content-wrap
mempunyai padding bawah yang adalah kemuncak footer, memastikan ruang yang cukup tepat yang tinggal untuk nota kaki di dalam bekas mereka ditempatkan di dalam. A pembalutdiv
digunakan di sini yang akan mengandungi semua kandungan laman lain. - Yang
footer
ditetapkan untukabsolute
berpegang kepadabottom: 0
daripadapage-container
ia terletak. Ini penting, kerana tidakabsolute
ke ruang pandang, tetapi akan bergerak ke bawah jikapage-container
lebih tinggi daripada ruang pandang. Seperti yang dinyatakan, ketinggiannya, sewenang-wenang ditetapkan ke2.5rem
sini, digunakan dicontent-wrap
atasnya.
Dan di sana anda memilikinya. Footer anda kini berada di tempat yang anda harapkan!
Sentuhan akhir
Sudah tentu, ini adalah CSS, jadi tidak akan lengkap tanpa beberapa pertimbangan UX khusus mudah alih, dan pendekatan alternatif menggunakan min-height: 100%
daripada 100vh
. Tetapi ini mempunyai kekurangannya sendiri.
Flexbox (dengan flex-grow) atau Grid juga dapat digunakan, dan keduanya sangat kuat.
Kaedah mana yang anda pilih bergantung sepenuhnya kepada anda, dan spesifik reka bentuk anda. Semoga contoh dan pautan di atas membantu anda menjimatkan masa dalam membuat keputusan dan melaksanakannya.
Terima kasih untuk membaca. Berikut adalah beberapa perkara lain yang saya tulis baru-baru ini:
- Panduan pemula untuk Perkhidmatan Kontainer Elastik Amazon
- Uji Reaksi dengan Jest dan Enzim