Rumah > Artikel > hujung hadapan web > Mengapakah `kedudukan: melekit` tidak berfungsi pada pengaki saya apabila ketinggian isi halaman dan elemen #utama ditentukan?
kedudukan: melekit tidak berfungsi apabila ketinggian ditentukan
Masalah:
Pengguna menghadapi masalah di mana pengaki, yang ditetapkan sebagai #footerNav, gagal mematuhi kedudukan: gelagat melekit apabila sifat ketinggian ditetapkan untuk kedua-dua isi halaman dan elemen #utama. Pengaki kekal statik dan bukannya menatal tetap ke bahagian atas port pandangan.
Penyelesaian:
Isu timbul daripada limpahan kandungan yang disebabkan oleh sifat ketinggian. kedudukan: sticky direka untuk menjadi aktif hanya apabila blok kandungannya mencapai ambang yang ditentukan. Dalam kes ini, menetapkan badan { ketinggian: 100%; } mewujudkan situasi di mana pengaki serta-merta mencapai penghujung blok yang mengandunginya, menghalang kedudukan: melekit daripada pernah diaktifkan.
Penjelasan:
Mengikut takrifan kedudukan : melekit, kedudukan melekit digunakan apabila elemen melepasi ambang tertentu dalam blok yang mengandunginya. Blok yang mengandungi dalam kes ini ialah badan, dan apabila badan { ketinggian: 100% } ditetapkan, ketinggian badan dihadkan ke port pandangan.
Apabila #utama { ketinggian: 92% } ditentukan , 92% ketinggian yang tersedia diperuntukkan kepada #utama, hanya tinggal 8% untuk #footerNav. Memandangkan #footerNav sudah berada di bahagian bawah blok kandungannya (badan), ia tidak boleh menatal melepasi sempadan viewport dan mengaktifkan kedudukan: melekit.
Penyelesaian:
Untuk menyelesaikan isu, pastikan kandungan tidak melimpahi blok yang mengandungi. Ini boleh dicapai dengan mengalih keluar sifat ketinggian daripada badan dan #utama, membenarkan kandungan mengalir secara semula jadi dalam port pandangan tanpa menyebabkan limpahan.
Nota Tambahan:
Atas ialah kandungan terperinci Mengapakah `kedudukan: melekit` tidak berfungsi pada pengaki saya apabila ketinggian isi halaman dan elemen #utama ditentukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!