Bagaimana untuk Melaksanakan dan Menyelesaikan Masalah Pengaki Melekat CSS?

Pengaki Melekat CSS: Menyelesaikan Masalah dan Melaksanakan

Ramai pembangun web menghadapi cabaran apabila melaksanakan pengaki melekat CSS di tapak web mereka. Satu isu biasa ialah berlakunya kandungan melangkaui bekasnya, menyebabkan bar skrol yang tidak diingini. Isu lain ialah apabila imej latar belakang pada div pengaki dipenggal dan tidak memanjangkan ketinggian penuh halaman.

Menyelesaikan Masalah Limpahan Kandungan

Dalam HTML yang disediakan , div #content melimpahi bekasnya dan melangkaui div #page. Untuk menyelesaikan masalah ini, anda boleh menetapkan ketinggian maksimum atau sifat limpahan untuk div #content. Berikut ialah CSS yang diubah suai:

#content {
    max-height: calc(100% - 40px);
    overflow: auto;
}

Memperluaskan Ketinggian Imej Latar Belakang

Untuk memanjangkan imej latar belakang pada div #footer ke ketinggian penuh halaman, anda boleh menetapkan kedudukannya kepada mutlak dan melaraskan ketinggiannya dengan sewajarnya:

#footer {
    position: absolute;
    bottom: 0;
    height: calc(100% - 40px);
}

Alternatif Penyelesaian

Coretan Pengaki Melekit CSS daripada Trik CSS:

Untuk penyelesaian pantas, anda boleh melaksanakan coretan pengaki melekit daripada Trik CSS: https://css-tricks.com/snippets/css/sticky-footer/

jQuery Sticky Footer Snippet:

Sebagai alternatif, anda boleh menggunakan penyelesaian jQuery daripada Trik CSS: https://css-tricks.com/snippets/jquery/jquery-sticky-footer/ (dengan demo langsung).

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan dan Menyelesaikan Masalah Pengaki Melekat CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!