Rumah > hujung hadapan web > tutorial css > Bagaimana untuk membuat pengaki melekit dalam HTML?

Bagaimana untuk membuat pengaki melekit dalam HTML?

Susan Sarandon
Lepaskan: 2024-11-11 18:41:03
asal
593 orang telah melayarinya

How to Create a Sticky Footer in 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 */
}
Salin selepas log masuk

Struktur HTML:

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan