Bagaimana untuk Mencipta Pengaki Melekat Yang Kekal di Bahagian Bawah Halaman atau Kandungan, Mana Yang Lebih Rendah?

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

Apabila ketinggian kandungan yang dimuatkan secara dinamik dalam bahagian berbeza-beza, ia boleh mencipta isu yang membingungkan: bagaimana

bahagian kekal di bahagian bawah kandungan yang boleh dilihat sambil turut mematuhi sempadan bawah tetingkap penyemak imbas?

Versi Flexbox

Bagi mereka yang mempunyai kelebihan menggunakan flexbox, mencapai pengaki melekit ini adalah sebahagian daripada kek. Dengan melampirkan semua elemen dalam bekas fleksibel dengan pembalut regangan ketinggian, pengaki boleh menyesuaikan diri dengan kandungan dinamik dengan mudah.

Hanya konfigurasikan elemen pembalut dengan paparan: flex dan flex-direction: lajur. Kemudian, tetapkan sekurang-kurangnya satu elemen adik beradik dengan nilai lentur melebihi 0, seperti:

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

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

article {
  flex: 1;
}

Penanda Html:

<div>

Pendekatan ini melekatkan pengaki dengan berkesan ke bahagian bawah tetingkap penyemak imbas apabila kandungan pendek dan melaraskan kedudukannya secara dinamik agar sepadan dengan ketinggian kandungan yang lebih panjang.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengaki Melekat Yang Kekal di Bahagian Bawah Halaman atau Kandungan, Mana Yang Lebih Rendah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!