Bagaimana untuk Membuat Warna Latar Belakang Aside Menjangkaui Induknya yang Melimpah?

Jadikan Warna Latar Belakang Melanjutkan ke Kawasan Limpahan

Isu:

Dalam reka letak web, warna latar belakang elemen "ketepikan" dalam bekas "overflow: auto" tidak melepasi kawasan yang boleh dilihat, meninggalkan latar belakang putih dalam kawasan bar skrol.

Soalan:

Bagaimanakah kita boleh memaksa warna latar belakang elemen "ketepikan" untuk dipaparkan secara dinamik sebagai ketinggian kandungan induk, walaupun walaupun bekas limpahan mempunyai terhad ketinggian?

Jawapan:

Pelaksanaan CSS Terhad

Malangnya, dengan CSS sahaja, adalah mustahil untuk memanjangkan latar belakang warna ke dalam kawasan limpahan. Ini kerana:

• Warna latar belakang hanya meliputi lebar dan ketinggian sesuatu elemen, bukan jidar atau kawasan limpahan.
• Sifat "limpahan" hanya mengawal kandungan, bukan latar belakang.

JavaScript Solution

Untuk mencapai yang diingini kesan, kita perlu menggunakan JavaScript. Berikut ialah coretan:

const aside = document.querySelector("aside");
const parent = aside.parentElement;

parent.addEventListener("scroll", () => {
  aside.style.height = `${parent.scrollHeight}px`;
});

Penjelasan:

Skrip ini menambahkan pendengar acara pada elemen induk yang memantau penatalan. Apabila menatal berlaku, ia mengemas kini ketinggian elemen "ketepikan" untuk memadankan ketinggian kandungan boleh ditatal, memastikan warna latar belakang sentiasa memenuhi seluruh kawasan limpahan.

Nota:

• Skrip ini menganggap bahawa elemen induk mempunyai "limpahan: auto" harta.
• "ketepikan" dan "ibu bapa" masing-masing ialah pemilih CSS untuk elemen "ketepikan" dan induknya. Laraskannya supaya sepadan dengan HTML anda.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Warna Latar Belakang Aside Menjangkaui Induknya yang Melimpah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!