Wie kann man die Hintergrundfarbe dynamisch erweitern, um den Inhaltsbereich auszufüllen?

Nebenelement erzwingen, Inhaltsbereich dynamisch mit Hintergrundfarbe zu füllen

In HTML umfasst ein allgemeines Layout ein Nebenelement neben einem Hauptinhaltsbereich innerhalb eines scrollenden Überlaufs. Allerdings wird die Hintergrundfarbe des Seitenelements normalerweise im sichtbaren Bereich abgeschnitten, sodass unterhalb der Falte ein leerer Raum verbleibt. In diesem Artikel geht es um die Herausforderung, die nebenstehende Hintergrundfarbe dynamisch zu erweitern, um sie an die Gesamthöhe des Inhalts anzupassen.

Problemstellung

Bedenken Sie die folgende HTML-Struktur:

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

Das #body-Element verfügt über einen Überlauf, der auf „Auto“ eingestellt ist und das Scrollen des Hauptinhalts ermöglicht. Die Hintergrundfarbe des Nebenelements sollte sich vertikal von oben nach unten über den gesamten Inhalt erstrecken, auch wenn die gerenderte Höhe auf den sichtbaren Bereich beschränkt ist.

Einschränkungen

• Es können keine zusätzlichen Elemente hinzugefügt werden.
• Das Nebenelement muss mit dem Hauptinhalt scrollen.
• Die Hintergrundfarbe muss sich bis zur gesamten Inhaltshöhe unterhalb der Falte erstrecken.
• Der Überlauf des aside-Elements kann nicht auf automatisch gesetzt werden.

JavaScript-Lösung

Leider kann dies nicht allein durch CSS erreicht werden. Die Überlaufeigenschaft wirkt sich auf den Inhalt aus, nicht auf den Hintergrund. Daher ist eine JavaScript-Lösung erforderlich. Ein Ansatz beinhaltet:

1. Erstellen Sie eine Funktion, um die Seitenhöhe festzulegen:

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

2. Rufen Sie die Funktion auf, wenn das Fenster geladen und seine Größe geändert wird:

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

Dieses Skript passt die Seitenhöhe dynamisch an die Gesamthöhe des Inhalts an und stellt sicher, dass sich die Hintergrundfarbe bis zum unteren Rand des Bildlaufbereichs erstreckt.

Das obige ist der detaillierte Inhalt vonWie kann man die Hintergrundfarbe dynamisch erweitern, um den Inhaltsbereich auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!