Bagaimanakah Saya Boleh Mencipta Pengaki Melekat Yang Kekal di Bahagian Bawah Kandungan Halaman Dinamik?

Pengaki di Bahagian Bawah Halaman atau Kandungan, Yang Mana Lebih Rendah

Pengenalan

Mengekalkan pengaki di bahagian bawah mutlak halaman boleh mencabar apabila kandungan halaman adalah dinamik dan berbeza-beza ketinggian. Artikel ini mendalami teknik untuk meletakkan pengaki secara automatik di bahagian bawah kandungan halaman atau bahagian bawah tetingkap penyemak imbas, bergantung pada yang lebih rendah.

Pemuatan Kandungan Dinamik

Dalam senario anda , kandungan dimuatkan secara dinamik ke dalam elemen menggunakan JavaScript. Apabila kandungan berubah, ketinggian juga berubah. Anda ingin mengekalkan pengaki di bahagian bawah kandungan halaman walaupun dengan pemuatan kandungan dinamik ini.

Pengaki Melekit dengan Flexbox

Flexbox menawarkan penyelesaian yang mudah untuk pengaki melekit. Dengan mencipta bekas flex (#main-wrapper) dengan set arah flex pada lajur, anda boleh mempunyai berbilang elemen disusun secara menegak dalam bekas.

Kunci untuk mencapai pengaki melekit dengan flexbox adalah untuk menetapkan nilai flex lebih besar daripada 0 kepada semua elemen kecuali pengaki. Ini memastikan unsur-unsur ini akan berkembang untuk mengisi ruang yang tersedia secara menegak dalam bekas.

Dalam kes ini, elemen diberikan flex: 1, yang memberitahu penyemak imbas untuk mengembangkannya untuk mengisi ruang yang tinggal selepas pengepala ketinggian tetap dan elemen navigasi.

Coretan Kod

Kod berikut menunjukkan cara untuk melaksanakan pengaki melekit menggunakan flexbox:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

Kesimpulan

Oleh memanfaatkan kuasa flexbox dan menggunakan sifat ketinggian min pada bekas (#main-wrapper), anda boleh membuat pengaki melekit yang melaraskan kedudukannya secara automatik berdasarkan ketinggian kandungan. Pendekatan ini menyediakan penyelesaian yang fleksibel untuk pemuatan kandungan dinamik sambil memastikan pengaki kekal di bahagian bawah halaman atau tetingkap penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Pengaki Melekat Yang Kekal di Bahagian Bawah Kandungan Halaman Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!