Rumah > hujung hadapan web > tutorial css > Mengapa Kaki Melekit Saya Tidak Melekat?

Mengapa Kaki Melekit Saya Tidak Melekat?

Linda Hamilton
Lepaskan: 2024-12-11 08:14:10
asal
728 orang telah melayarinya

Why is My Sticky Footer Not Sticking?

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan