Mengapa Kaki Melekit Saya Tidak Melekat?

Sticky Footer Woes: Analisis Terperinci

Membangunkan sticky footer menggunakan CSS boleh menjadi tugas yang mudah dengan pelaksanaan HTML dan CSS yang sesuai. Walau bagaimanapun, isu tertentu boleh menghalang kefungsian yang dimaksudkan dan penampilan visual pengaki.

Dalam kod HTML yang disediakan, kandungan melangkaui bekas yang ditetapkan, mengakibatkan bar skrol yang tidak diingini. Selain itu, imej latar belakang untuk elemen halaman tidak sampai ke ketinggian penuh halaman.

Memahami CSS

Kod CSS yang disediakan mematuhi prinsip asas reka letak pengaki melekit, tetapi beberapa aspek utama memerlukan perhatian:

1. #halaman: Bekas elemen (#page) tidak mempunyai sifat ketinggian, yang penting untuk corak reka letak ini. Dengan memberikan ketinggian yang jelas, bekas boleh mengandungi kandungan, menghapuskan keperluan untuk bar skrol.
2. #footer: Elemen pengaki (#footer) mempunyai margin atas negatif (-22px ) digunakan padanya. Teknik ini menolak pengaki ke atas dan menyembunyikan sebahagiannya di bawah kandungan. Untuk mencapai kesan melekit, pengaki hendaklah ditetapkan kedudukan 'mutlak' atau 'tetap' sebaliknya.
3. #kandungan: Sifat kedudukan untuk #kandungan ditetapkan kepada 'relatif. ' Walau bagaimanapun, untuk reka letak pengaki melekit berfungsi dengan berkesan, #content harus mempunyai 'kedudukan: mutlak;' untuk bersaing dengan kedudukan mutlak #footer.
4. Pelarasan ketinggian: Sifat ketinggian untuk #page, #content dan #footer memerlukan pelarasan untuk memastikan reka letak menduduki ketinggian penuh ruang pandang.

Cekanan CSS dan jQuery

Jika pelarasan manual CSS terbukti mencabar, coretan CSS pra-dibuat atau pemalam jQuery boleh menyelaraskan proses pelaksanaan sticky footer.

• Helah CSS: Trik CSS menawarkan kawasan coretan dengan coretan pengaki melekit yang komprehensif. (http://css-tricks.com/snippets/css/sticky-footer/)
• Sticky footer dengan jQuery: CSS Tricks juga menyediakan penyelesaian berasaskan jQuery untuk sticky footer . (http://css-tricks.com/snippets/jquery/jquery-sticky-footer/)

Dengan melaksanakan langkah pembetulan ini dan menggabungkan coretan CSS atau jQuery, pembangun boleh menyelesaikan isu dengan mereka pengaki melekit dan mencapai reka letak dan fungsi yang diingini.

Atas ialah kandungan terperinci Mengapa Kaki Melekit Saya Tidak Melekat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!