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.