Bagaimana cara menjaga kaki anda di tempatnya?

Pengaturcaraan

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-containerberlaku di sekeliling segala-galanya pada halaman, dan menetapkan ketinggian minimum kepada 100% daripada ketinggian viewport ( vh). Seperti yang ada relative, elemen anaknya dapat diatur dengan absolutekedudukan berdasarkannya nanti.
  • Yang content-wrapmempunyai padding bawah yang adalah kemuncak footer, memastikan ruang yang cukup tepat yang tinggal untuk nota kaki di dalam bekas mereka ditempatkan di dalam. A pembalut divdigunakan di sini yang akan mengandungi semua kandungan laman lain.
  • Yang footerditetapkan untuk absoluteberpegang kepada bottom: 0daripada page-containeria terletak. Ini penting, kerana tidak absoluteke ruang pandang, tetapi akan bergerak ke bawah jika page-containerlebih tinggi daripada ruang pandang. Seperti yang dinyatakan, ketinggiannya, sewenang-wenang ditetapkan ke 2.5remsini, digunakan di content-wrapatasnya.

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