Wie kann man dafür sorgen, dass die Hintergrundfarbe einer Seite über das überlaufende übergeordnete Element hinausgeht?

Hintergrundfarbe bis in den Überlaufbereich erstrecken

Problem:

In einem Weblayout Die Hintergrundfarbe eines „aside“-Elements innerhalb eines „overflow:auto“-Containers geht nicht über den sichtbaren Bereich hinaus und hinterlässt einen weißen Hintergrund im Bildlaufleistenbereich.

Frage:

Wie können wir erzwingen, dass die Hintergrundfarbe des „aside“-Elements dynamisch entsprechend der Höhe des übergeordneten Inhalts gerendert wird, obwohl die Der Überlaufbehälter ist begrenzt Höhe?

Antwort:

CSS-Implementierung ist begrenzt

Leider ist es mit CSS allein unmöglich, den Hintergrund zu erweitern Farbe in den Überlaufbereich. Dies liegt daran:

• Hintergrundfarben decken nur die Breite und Höhe eines Elements ab, nicht den Rand oder den Überlaufbereich.
• Die Eigenschaft „Überlauf“ steuert nur den Inhalt, nicht den Hintergrund.

JavaScript-Lösung

Um den gewünschten Effekt zu erzielen, müssen wir Verwenden Sie JavaScript. Hier ist ein Ausschnitt:

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

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

Erklärung:

Dieses Skript fügt dem übergeordneten Element einen Ereignis-Listener hinzu, der das Scrollen überwacht. Beim Scrollen wird die Höhe des „aside“-Elements so aktualisiert, dass sie mit der Höhe des scrollbaren Inhalts übereinstimmt, wodurch sichergestellt wird, dass die Hintergrundfarbe immer den gesamten Überlaufbereich ausfüllt.

Hinweis:

• Dieses Skript geht davon aus, dass das übergeordnete Element eine „overflow: auto“-Eigenschaft hat.
• „aside“ und „parent“ sind die CSS-Selektoren für das „aside“-Element bzw. sein übergeordnetes Element. Passen Sie sie an Ihren HTML-Code an.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass die Hintergrundfarbe einer Seite über das überlaufende übergeordnete Element hinausgeht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!