Bagaimana untuk Memanjangkan Warna Latar Belakang Secara Dinamik untuk Mengisi Kawasan Kandungan?

Paksa Elemen Ketepikan Secara Dinamik Isi Kawasan Kandungan dengan Warna Latar Belakang

Dalam HTML, susun atur biasa melibatkan elemen ketepikan bersama kawasan kandungan utama dalam limpahan tatal. Walau bagaimanapun, warna latar belakang elemen sampingan biasanya dipotong pada kawasan yang boleh dilihat, meninggalkan ruang kosong di bawah lipatan. Artikel ini menangani cabaran memanjangkan warna latar belakang yang diketepikan secara dinamik agar sepadan dengan jumlah ketinggian kandungan.

Pernyataan Masalah

Pertimbangkan struktur HTML berikut:

<div id="body">
  <main>...</main>
  <aside>...</aside>
</div>

Elemen #body mempunyai limpahan yang ditetapkan kepada automatik, membolehkan penatalan kandungan utama. Elemen tepi hendaklah mempunyai warna latar belakang yang terbentang menegak dari atas ke bawah jumlah kandungan, walaupun ketinggian yang diberikan adalah terhad kepada kawasan yang boleh dilihat.

Penghadan

• Tiada elemen tambahan boleh ditambah.
• Elemen tepi mesti tatal dengan kandungan utama.
• Ia mesti mempunyai warna latar belakangnya yang memanjang ke ketinggian kandungan penuh di bawah lipatan.
• Elemen tepi tidak boleh menetapkan limpahannya kepada auto.

Penyelesaian JavaScript

Malangnya, ini tidak boleh dicapai melalui CSS semata-mata. Sifat limpahan mempengaruhi kandungan, bukan latar belakang. Oleh itu, penyelesaian JavaScript diperlukan. Satu pendekatan melibatkan:

1. Buat fungsi untuk mengetepikan ketinggian:

function setAsideHeight() {
  const bodyHeight = document.getElementById("body").offsetHeight;
  const aside = document.querySelector("aside");
  aside.style.height = bodyHeight + "px";
}

2. Panggil fungsi apabila tetingkap dimuatkan dan mengubah saiz:

window.addEventListener("load", setAsideHeight);
window.addEventListener("resize", setAsideHeight);

Skrip ini melaraskan ketinggian sisi secara dinamik agar sepadan dengan jumlah ketinggian kandungan, memastikan warna latar belakangnya memanjang ke bahagian bawah kawasan penatalan.

Atas ialah kandungan terperinci Bagaimana untuk Memanjangkan Warna Latar Belakang Secara Dinamik untuk Mengisi Kawasan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!