Mengapa Pengaki Melekit CSS Saya Menyebabkan Bar Skrol dan Latar Belakang Yang Tidak Diingini?

Memahami Isu dengan CSS Sticky Footers

Melaksanakan pengaki melekit CSS boleh memperkenalkan bar skrol yang tidak diingini dan menyebabkan kandungan melangkaui bekasnya. Selain itu, imej latar belakang mungkin tidak menutup halaman sepenuhnya.

Untuk menangani perkara ini, mari kita periksa kod HTML dan CSS yang disediakan:

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#content {
    height:100%;
    min-height:100%;
}

The Isu:

Masalah timbul daripada menetapkan kedua-dua ketinggian dan ketinggian min kepada 100%. Ini membetulkan kawasan kandungan pada ketinggian tertentu, menghalangnya daripada berkembang melebihi dimensi yang ditentukan. Walau bagaimanapun, kandungan dalam div kandungan mungkin melebihi ketinggian yang ditetapkan, mengakibatkan limpahan dan bar skrol.

Penyelesaian 1: Css Tricks Sticky Footer Snippet

Lawati Trik CSS laman web untuk mendapatkan coretan kod yang direka khusus untuk membuat pengaki melekit menggunakan CSS.

html, body { height:100%; }
#wrapper { min-height:100%; position:relative; }
#footer { position:absolute; bottom:0; width:100%; }

Penyelesaian 2: jQuery Sticky Footer Snippet

Jika menggunakan jQuery adalah pilihan, CSS Tricks juga menyediakan coretan pengaki melekit berasaskan jQuery:

$(document).ready(function() {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    footer.css({
        top: height - pos.bottom
    });
});

Dengan melaksanakan penyelesaian ini, tingkah laku pengaki melekit boleh dicapai sambil membenarkan kawasan kandungan berkembang secara dinamik berdasarkan kandungannya, menghapuskan bar skrol yang tidak diingini dan memastikan imej latar belakang meliputi halaman sepenuhnya.