Comment faire en sorte que la couleur d'arrière-plan d'un aparté s'étende au-delà de son parent débordant ?

Agrandir la couleur d'arrière-plan dans la zone de débordement

Problème :

Dans une mise en page Web, la couleur d'arrière-plan d'un élément "aside" dans un conteneur "overflow: auto" ne s'étend pas au-delà de la zone visible, laissant un fond blanc dans la barre de défilement zone.

Question :

Comment pouvons-nous forcer la couleur d'arrière-plan de l'élément "aside" à s'afficher dynamiquement selon la hauteur du contenu parent, même si le débordement le conteneur a une hauteur limitée ?

Réponse :

CSS La mise en œuvre est limitée

Malheureusement, avec CSS seul, il est impossible d'étendre la couleur d'arrière-plan dans la zone de débordement. En effet :

• Les couleurs d'arrière-plan couvrent uniquement la largeur et la hauteur d'un élément, pas la marge ou la zone de débordement.
• La propriété "overflow" contrôle uniquement le contenu, pas le arrière-plan.

Solution JavaScript

Pour obtenir l'effet souhaité, nous devons utilisez Javascript. Voici un extrait :

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

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

Explication :

Ce script ajoute un écouteur d'événement à l'élément parent qui surveille le défilement. Lors du défilement, il met à jour la hauteur de l'élément « de côté » pour qu'elle corresponde à la hauteur du contenu défilant, garantissant ainsi que la couleur d'arrière-plan remplit toujours toute la zone de débordement.

Remarque :

• Ce script suppose que l'élément parent possède une propriété "overflow: auto".
• "aside" et "parent" sont les sélecteurs CSS pour l'élément "aside" et son parent, respectivement. Ajustez-les pour qu'ils correspondent à votre HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!