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:

• Menentukan ketinggian sebagai peratusan, seperti vh, masih tidak digalakkan kerana ia mungkin membawa kepada perkara yang sama masalah.
• Isu itu ditemui dalam Firefox 61 (Malam), Safari 53 (Pratonton Teknologi) dan Chrome 65.

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!