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

Menyimpan Pengaki di Bahagian Bawah Halaman dengan Pengepala Tetap

Masalah:

Anda mahu meletakkan pengaki di bahagian paling bawah halaman, di bawah semua kandungan lain dan memastikan ia kekal pada tempatnya apabila menatal, tanpa melekat pada skrin seperti kedudukan tetap.

Penyelesaian:

Kaedah Ryan Fait

Pendekatan ini sesuai untuk senario di mana kedua-dua pengepala dan pengaki mempunyai ketinggian tetap. Ia melibatkan:

1. Menetapkan ketinggian dan hingga 100% untuk memastikan langkah seterusnya berjaya.
2. Memberi
   mengandungi kandungan halaman (#content) ketinggian minimum 100%.
3. Menarik pengaki ke atas dengan menggunakan margin bawah negatif pada #kandungan yang sama dengan ketinggian pengaki dan menetapkan kedudukannya kepada relatif.
4. Menambah elemen pengatur jarak pada penghujung #content atau menggunakan gabungan padding-bottom dan box-sizing: border-box untuk mengelakkan kandungan daripada bersembunyi di belakang pengaki.

Menambah Pengepala

Untuk memasukkan pengepala sambil mengekalkan kedudukan pengaki:

1. Tambahkan pengepala ke #content jika ia harus kekal dalam aliran biasa.
2. Jika pengepala memerlukan kedudukan mutlak, tambah spacer atau gunakan padding-top dan box-sizing: border-box untuk mengelakkan kandungan bertindih.

Pertimbangan:

• Kotak sokongan penyemak imbas moden- saiz: kotak sempadan, tetapi jika sokongan yang lebih luas diperlukan, gunakan pengatur jarak.
• Pastikan bahawa pengepala dan pengaki ketinggian ditetapkan untuk kaedah ini berfungsi.

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