Bagaimana untuk Melaksanakan Pengaki Melekat CSS Semasa Mengendalikan Kandungan Melimpah dan Imej Latar Belakang?

Sticky Footer dengan CSS

Apabila melaksanakan CSS sticky footer, pembangun menghadapi pelbagai cabaran, termasuk kandungan yang melimpah dan imej latar belakang yang dipotong. Artikel ini menangani isu ini dan menyediakan penyelesaian.

Struktur HTML dan CSS

Struktur HTML yang disediakan termasuk elemen berikut:

• # halaman: Bekas untuk keseluruhan halaman
• #header: Header bahagian
• #kandungan: Kawasan kandungan utama
• #footer: Bahagian pengaki

CSS yang sepadan termasuk peraturan reka letak dan penggayaan, dengan perhatian khusus diberikan kepada kandungan dan kawasan pengaki.

Limpahan Kandungan dan Menatal

Untuk menyelesaikan isu kandungan melimpah dan menyebabkan bar skrol, pelarasan berikut diperlukan:

1. Tetapkan limpahan: tersembunyi pada elemen #content untuk mengelakkan sebarang elemen daripada melangkaui bekasnya.
2. Balut kandungan yang melimpah dalam bekas yang memaparkan kandungan boleh ditatal secara menegak. Contohnya:

<div>
<p><strong>Kedudukan Pengaki Melekat CSS</strong></p>
<p>Untuk mencapai pengaki melekat, gunakan peraturan CSS berikut:</p>
<ol>
<li>Tetapkan kedudukan: mutlak pada elemen #footer untuk meletakkannya di bahagian bawah bekas.</li>
<li>Tetapkan bahagian bawah: 0 untuk menjajarkan pengaki ke bahagian bawah bekas.</li>
<li>Lebar tetapkan: 100% untuk menjadikan pengaki merentangi keseluruhan lebar bekas.</li>
</ol>
<p>Berikut ialah contoh kemas kini CSS:</p>
<pre class="brush:php;toolbar:false">#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Memperluas Imej Latar Belakang

Untuk memanjangkan imej latar belakang ke ketinggian penuh halaman:

1. Tetapkan latar belakang -lampiran: ditetapkan pada bekas (cth., #page) untuk mengekalkan imej latar belakang semasa menatal.
2. Tetapkan saiz latar belakang: penutup untuk menjadikan imej latar belakang meliputi seluruh kawasan bekas.

Kesimpulan

Dengan menggabungkan teknik ini, anda boleh mencipta CSS pengaki melekit yang menghalang limpahan kandungan, menatal kandungan yang diperlukan sahaja dan memaparkan imej latar belakang dengan betul. Penyelesaian ini memastikan pengalaman pengguna yang lancar dan mengekalkan reka letak yang menarik secara visual.