Comment étendre dynamiquement la couleur d’arrière-plan pour remplir la zone de contenu ?

Forcer l'élément de côté pour remplir dynamiquement la zone de contenu avec la couleur d'arrière-plan

En HTML, une mise en page courante implique un élément de côté à côté d'une zone de contenu principale dans un débordement de défilement. Cependant, la couleur d'arrière-plan de l'élément latéral est généralement tronquée au niveau de la zone visible, laissant un espace vide sous le pli. Cet article aborde le défi consistant à étendre dynamiquement la couleur d'arrière-plan latérale pour qu'elle corresponde à la hauteur totale du contenu.

Énoncé du problème

Considérez la structure HTML suivante :

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

L'élément #body a un débordement réglé sur auto, permettant le défilement du contenu principal. La couleur d'arrière-plan de l'élément latéral doit s'étendre verticalement du haut vers le bas du contenu total, même si la hauteur rendue est limitée à la zone visible.

Limitations

• Aucun élément supplémentaire ne peut être ajouté.
• L'élément latéral doit défiler avec le contenu principal.
• Sa couleur d'arrière-plan doit s'étendre sur toute la hauteur du contenu sous le pli.
• L'élément side ne peut pas avoir son débordement défini sur auto.

Solution JavaScript

Malheureusement, cela ne peut pas être réalisé uniquement via CSS. La propriété overflow affecte le contenu, pas l'arrière-plan. Une solution JavaScript est donc nécessaire. Une approche consiste à :

1. Créer une fonction pour définir la hauteur de côté :

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

2. Appeler la fonction lorsque la fenêtre se charge et se redimensionne :

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

Ce script ajuste dynamiquement la hauteur latérale pour correspondre à la hauteur totale du contenu, garantissant que sa couleur d'arrière-plan s'étend jusqu'au bas de la zone de défilement.

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!