Mengapa 'kedudukan: melekit' Tidak Berfungsi Semasa Menetapkan 'ketinggian'?

'position:sticky' tidak berfungsi apabila menetapkan 'height'

Seperti yang anda perhatikan, menetapkan sifat ketinggian pada elemen footer anda menghalangnya daripada melekat pada bahagian atas halaman apabila anda menatal ke bawah. Tingkah laku ini berlaku kerana cara algoritma kedudukan melekit berfungsi.

Menurut spesifikasi CSS, elemen melekit dianggap sebagai kedudukan relatif sehingga blok yang mengandunginya melepasi ambang yang ditentukan. Dalam kes anda, blok yang mengandungi ialah elemen badan, yang mempunyai ketinggian 100%. Apabila elemen utama, yang mempunyai ketinggian 92%, ditatal ke bawah, elemen pengaki mencapai bahagian bawah elemen badan dan dianggap berada di tepi bertentangan blok kandungannya. Oleh itu, ia tidak lagi dianggap melekit dan kekal di bahagian bawah halaman.

Untuk menyelesaikan isu ini, anda boleh mengalih keluar sifat ketinggian daripada elemen utama. Ini akan membolehkan elemen pengaki melekat pada bahagian atas halaman seperti yang dimaksudkan. Sebagai alternatif, anda boleh menetapkan sifat ketinggian pada elemen badan kepada 100vh dan bukannya 100%. Ini akan memastikan bahawa elemen badan sentiasa sama tinggi dengan viewport dan elemen pengaki akan melekat pada bahagian atas halaman tanpa mengira ketinggian elemen utama.

Atas ialah kandungan terperinci Mengapa 'kedudukan: melekit' Tidak Berfungsi Semasa Menetapkan 'ketinggian'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!