Bagaimanakah Saya Boleh Menyimpan Pengaki di Bahagian Bawah Halaman Tanpa mengira Ketinggian Kandungan?

Pengaki di Bahagian Bawah Halaman atau Kandungan

Masalah:

Kandungan yang dimuatkan secara dinamik dalam boleh berbeza-beza ketinggian. Matlamatnya adalah untuk meletakkan

di bahagian bawah halaman apabila kandungannya luas, atau di bahagian bawah tetingkap penyemak imbas apabila ia terhad.

Jawapan:

Versi Flexbox:

Untuk penyemak imbas yang menyokong Flexbox, penyelesaian mudah ialah menggunakan paparan: sifat flex bersama dengan ketinggian 100% untuk elemen pembalut (#main-wrapper). Ini memastikan bahawa pembalut terbentang untuk memenuhi keseluruhan port pandangan.

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

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

Di dalam pembalut, harus mempunyai nilai flex 1, yang membolehkan ia berkembang secara menegak. Ini memastikan bahawa

akan sentiasa ditolak ke bahagian bawah halaman atau bahagian bawah kandungan, bergantung pada mana yang lebih besar.

article {
  flex: 1;
}

HTML yang disemak:

<div>

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