Bagaimanakah Saya Boleh Mencipta Pengaki Melekit Yang Kekal di Bahagian Bawah Halaman Tanpa mengira Ketinggian Kandungan?

Kedudukan Pengaki: Bahagian Bawah Halaman atau Kandungan, Sesuaikan dengan Ketinggian

Kandungan Dinamik, Peletakan Pengaki Bendalir

Dalam reka bentuk web, selalunya diingini untuk pastikan pengaki kekal di bahagian bawah halaman atau tetingkap penyemak imbas, tanpa mengira panjang kandungan. Ini boleh dicapai dengan perkara berikut:

Penyelesaian Flexbox

Dengan Flexbox, membuat pengaki melekit adalah mudah:

1. Tentukan bekas fleksibel (cth., #main- pembalut) dengan arah lentur ditetapkan ke lajur.
2. Tetapkan bekas lentur ketinggian min hingga 100% untuk memastikan ia menjangkau seluruh ketinggian halaman.
3. Tambahkan elemen kanak-kanak pada bekas fleksibel dengan nilai fleksibel lebih besar daripada 0 (cth., artikel { flex: 1; }). Ini membantu mengembangkan elemen secara menegak dan menolak pengaki ke arah bawah.

Kod CSS:

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

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

article {
  flex: 1;
}

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