Bagaimanakah Saya Boleh Mencipta Pengaki Melekit Yang Kekal di Bahagian Bawah Halaman atau Kandungan, Mana Yang Lebih Rendah?

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

Pengenalan

Dalam pembangunan web, adalah penting untuk memastikan kedudukan elemen yang betul pada halaman web, terutamanya apabila berurusan dengan kandungan dinamik. Satu cabaran biasa ialah mencapai pengaki yang kekal di bahagian bawah halaman atau kandungan, bergantung pada yang lebih rendah.

Pernyataan Masalah

Struktur HTML yang disediakan termasuk elemen pembalut induk (#main-wrapper) yang mengandungi pengepala, navigasi, artikel dan pengaki. Cabarannya ialah untuk melaraskan kedudukan pengaki secara dinamik berdasarkan ketinggian kandungan dalam elemen artikel. Pengaki harus melekat pada bahagian bawah halaman apabila terdapat kandungan yang mencukupi tetapi beralih ke bahagian bawah tetingkap penyemak imbas apabila kandungan terhad.

Flexbox Solution

Satu yang mantap dan pendekatan moden untuk menyelesaikan masalah ini adalah dengan memanfaatkan flexbox. Flexbox menawarkan sistem susun atur serba boleh yang memudahkan kedudukan dan penjajaran elemen dalam bekas. Dengan menggunakan keupayaan flexbox untuk menjajarkan elemen secara menegak, kami boleh mencapai gelagat pengaki melekat yang diingini.

Kod CSS

Kod CSS berikut menggunakan flexbox untuk melaksanakan sticky pengaki:

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

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

article {
  flex: 1;
}

Dalam persediaan ini, elemen #pembungkus-utama ialah kotak lentur bekas, dan ia mempunyai arah flex yang ditetapkan ke lajur, bermakna elemen akan disusun secara menegak. Elemen artikel mempunyai kelenturan: 1, yang menjadikannya menempati ruang yang tinggal yang tidak diambil oleh pengepala dan navigasi.

Apabila terdapat kandungan yang mencukupi dalam artikel, ia tumbuh untuk menolak pengaki ke bawah, meletakkannya pada bahagian bawah halaman. Walau bagaimanapun, apabila kandungan terhad, artikel akan mengecut dan pengaki bergerak secara dinamik ke bahagian bawah tetingkap penyemak imbas, kerana ketinggian min elemen #pembungkus utama memastikan ia sentiasa memenuhi port pandangan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Pengaki Melekit 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!