Bagaimana untuk membuat pengaki melekit dalam HTML?

Cara Memastikan Pengaki Ditetapkan ke Bahagian Bawah Halaman

Dalam halaman HTML, selalunya diingini untuk mempunyai pengaki tetap yang kekal di bahagian bawah halaman, tanpa mengira panjang kandungan. Walau bagaimanapun, kadangkala, isu penggayaan boleh menghalang elemen pengaki daripada menduduki lebar halaman penuh atau meninggalkan ruang putih di bawahnya.

Untuk menangani isu ini, penyelesaian yang popular ialah teknik "pengaki melekit". Kaedah ini melibatkan mencipta elemen pembalut yang mengandungi kandungan badan dan elemen tolak dengan ketinggian yang sama dengan pengaki.

Dengan menetapkan jidar bawah pembalut kepada nilai negatif yang bersamaan dengan ketinggian pengaki, elemen tolak ialah ditolak ke bahagian bawah halaman. Ini memaksa pengaki untuk melekat pada tepi bawah, tanpa mengira panjang halaman.

Untuk menggambarkan, pertimbangkan kod CSS berikut:

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

Struktur HTML:

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

Dengan melaksanakan pendekatan pengaki melekit ini, anda boleh memastikan elemen pengaki anda kekal di bahagian bawah halaman, mengisi keseluruhan lebar halaman dan menghapuskan ruang putih yang tidak diingini.

Atas ialah kandungan terperinci Bagaimana untuk membuat pengaki melekit dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!