Bagaimana untuk Meletakkan Pengaki di Bahagian Bawah Halaman dengan Pengepala Tetap?

Letakkan Pengaki di Bahagian Bawah Halaman dengan Pengepala Tetap

Memahami Isu dan Keperluan:

Anda mencari untuk meletakkan pengaki di bahagian bawah mutlak halaman, walaupun apabila terdapat pengepala tetap. Ini menghapuskan penggunaan kedudukan: tetap atau mempunyai pengaki di bahagian bawah skrin yang boleh dilihat.

Kaedah Sticky Footer Ryan Fait:

Kami akan menggunakan pendekatan Ryan Fait sebagai ia memenuhi spesifik anda syarat:

Langkah:

1. Tetapkan HTML dan Tinggi Badan kepada 100%: Tentukan ketinggian: 100% untuk dan untuk mewujudkan ketinggian 100% viewport.
2. Beri Kandungan 100% Ketinggian Minimum: Berikan #kandungan ketinggian min: 100% untuk memastikan ia mengambil keseluruhan ketinggian viewport.
3. Kedudukan Pengaki Benar-benar dan Mengimbangi Kandungan: Untuk meletakkan pengaki di bawah #kandungan, berikan #kandungan margin bawah negatif sama dengan ketinggian pengaki. Kemudian, letakkan #footer secara mutlak untuk meletakkannya di atas #kandungan.

4. Halang Kandungan daripada Pengaki Bertindih: Dua pilihan:

   • Spacer Elemen: Tambah
   • Padding-Bottom dan Saiz Kotak: Gunakan padding-bottom: 100px dan box-sizing: border-box pada #content (dengan awalan vendor yang betul).

Menambah Pengepala:

1. Pengepala dalam Normal Aliran: Untuk pengepala dalam aliran biasa, sarangkannya dalam #kandungan.
2. Pengepala Diletakkan Benar-Benar: Untuk meletakkan pengepala secara mutlak, laraskan bahagian atas pelapik #kandungan dengan sewajarnya.

Pendekatan Moden dengan Saiz Kotak:

Pelayar moden menyokong sepenuhnya saiz kotak: kotak sempadan, yang menghapuskan keperluan untuk elemen pengatur jarak. Walau bagaimanapun, menggunakan elemen spacer kekal sesuai untuk keserasian penyemak imbas yang lebih luas.

Kesimpulan:

Pendekatan ini menyediakan penyelesaian yang mantap untuk meletakkan pengaki di bahagian bawah halaman dengan pengepala tetap, memastikan paparan optimum pada semua peranti.

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