Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa pengaki 'kedudukan: melekit' saya tidak berfungsi apabila saya mentakrifkan sifat 'ketinggian'?

Mengapa pengaki 'kedudukan: melekit' saya tidak berfungsi apabila saya mentakrifkan sifat 'ketinggian'?

Barbara Streisand
Barbara Streisandasal
2024-11-11 09:50:02655semak imbas

Why isn't my 'position: sticky' footer working when I define a 'height' property?

'kedudukan: melekit' tidak berfungsi apabila 'tinggi' ditakrifkan

Apabila menggunakan CSS untuk mencipta pengepala melekit, adalah perkara biasa untuk tetapkan sifat ketinggian div pengaki. Walau bagaimanapun, ini kadangkala boleh menyebabkan gelagat melekit gagal.

Sebabnya ialah kedudukan melekit bergantung pada blok yang mengandungi untuk menentukan titik melekat. Apabila sifat ketinggian ditakrifkan pada div pengaki, ia menjadi blok yang mengandungi. Akibatnya, div pengaki sudah berada di tepi blok yang mengandunginya dan tiada lagi ambang untuk dilalui untuk mencetuskan gelagat melekit.

Untuk menyelesaikan isu ini, alih keluar sifat ketinggian daripada div pengaki. Ini akan membolehkan badan menjadi blok yang mengandungi dan div pengaki akan dapat melekat pada bahagian bawah halaman seperti yang dimaksudkan.

Berikut ialah contoh bagaimana CSS boleh diubah suai untuk membetulkan lekit tingkah laku:

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

#main {
  height: 92vh;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

Dengan perubahan ini, div pengaki kini akan melekat pada bahagian bawah halaman seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa pengaki 'kedudukan: melekit' saya tidak berfungsi apabila saya mentakrifkan sifat 'ketinggian'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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