Bagaimana untuk Mencipta Pengaki Melekat dalam CSS Tanpa Kedudukan Mutlak?

Cara Membuat Pengaki Responsif Menggunakan CSS

Mengekalkan pengaki di bahagian bawah halaman ialah keperluan reka bentuk web yang biasa. Walau bagaimanapun, sesetengah pengguna menghadapi kesukaran menggunakan sifat kedudukan "mutlak". Artikel ini akan membimbing anda melalui pelaksanaan CSS yang betul untuk mencapai kesan pengaki melekit tanpa mengganggu reka letak anda.

Latar Belakang Isu

Pengguna yang cuba membetulkan kedudukan pengaki mereka tidak berjaya biasanya menggunakan kod berikut:

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Cadangan Penyelesaian

Untuk menyelesaikan isu tanpa menggunakan pemalam atau elemen HTML tambahan, ikut langkah berikut:

1. Tambahkan peraturan CSS berikut pada lembaran gaya anda:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

2. Pastikan ketinggian yang dinyatakan dalam "body { margin}" sepadan dengan ketinggian sebenar elemen pengaki (cth., 100px).

Nota: Adalah disyorkan untuk menggunakan ID elemen HTML "#bottom-footer" untuk penyasaran dan bukannya "footer #bottom-footer," kerana yang kedua mungkin bercanggah dengan penggayaan CSS asal anda .

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengaki Melekat dalam CSS Tanpa Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!