Bagaimana untuk Mencipta Pengaki Tetap di Bahagian Bawah Halaman dalam HTML?

Mencipta Pengaki Tetap di Bahagian Bawah Halaman

Dalam HTML, pengaki biasanya diwakili oleh kelas div bernama "pengaki." Untuk membetulkan elemen ini di bahagian bawah halaman, sifat CSS tertentu perlu dilaksanakan.

Kod CSS yang disediakan meletakkan pengaki secara relatif dengan nilai teratas 490px, yang tidak sesuai untuk menetapkan pengaki pada bawah. Selain itu, kod tersebut tidak menyatakan sifat lebar, yang mengakibatkan pengaki tidak mengisi lebar halaman.

Untuk mencipta pengaki tetap, gabungan sifat CSS boleh digunakan. Satu pendekatan biasa ialah menggunakan teknik "sticky footer". Begini cara ia boleh dilaksanakan:

/* Sticky Footer by Ryan Fait */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.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 */
}

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

Dengan menggunakan teknik ini, elemen pengaki akan kekal di bahagian bawah halaman, walaupun kandungan halaman melaraskan ketinggian.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengaki Tetap di Bahagian Bawah Halaman dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!