Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Melekatkan Pengaki pada Bahagian Bawah Halaman dengan Pengepala Tetap?

Bagaimana untuk Melekatkan Pengaki pada Bahagian Bawah Halaman dengan Pengepala Tetap?

DDD
DDDasal
2024-12-08 21:04:15998semak imbas

How to Stick a Footer to the Bottom of a Page with a Fixed Header?

Cara Meletakkan Pengaki di Bahagian Bawah Halaman dengan Pengepala Tetap

Untuk meletakkan pengaki di bahagian bawah halaman, sementara juga mempunyai pengepala tetap, adalah perlu untuk menggunakan pendekatan yang tidak bergantung pada "kedudukan: tetap," yang akan letakkan pengaki relatif kepada port pandangan dan bukannya halaman itu sendiri.

Memanfaatkan Kaedah Ryan Fait

Pendekatan Ryan Fait adalah mudah dan berkesan untuk senario di mana kedua-dua pengepala dan pengaki ialah ketinggian tetap:

  1. Tetapkan ketinggian daripada kedua-dua dan elemen hingga 100%.
  2. Beri elemen #kandungan ketinggian minimum 100% untuk menolak #pengaki ke bawah halaman.
  3. Gunakan margin bawah negatif pada #kandungan untuk menarik pengaki ke bawah.
  4. Laraskan kedudukan pengaki berbanding #kandungan untuk memastikan ia dipaparkan pada atas.
  5. Tambahkan pengatur jarak atau gunakan padding-bottom dan saiz kotak pada #content untuk mengurus kandungan berlebihan dan mengelakkannya daripada bertindih dengan pengaki.

Menggabungkan Pengepala

Jika pengepala harus kekal dalam aliran biasa, cuma tambahkannya dalam #kandungan. Untuk meletakkannya secara mutlak, anda boleh menggunakan pengatur jarak atau gabungan bahagian atas pelapik dan saiz kotak.

Pelayar dan Alternatif yang Serasi

Kotak sokongan penyemak imbas moden -saiz: kotak sempadan. Untuk sokongan penyemak imbas yang lebih luas, pertimbangkan untuk menggunakan elemen spacer.

Atas ialah kandungan terperinci Bagaimana untuk Melekatkan Pengaki pada Bahagian Bawah Halaman dengan Pengepala Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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