Comment étendre dynamiquement la couleur d'arrière-plan d'une Flexbox Aside au contenu débordant ?

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

Problème

Dans une mise en page Flexbox, la couleur d'arrière-plan de l'élément de côté ne s'étend pas sur toute la hauteur de le conteneur parent, même si la hauteur du contenu est nettement supérieure à la zone visible. Comment faire en sorte que la couleur d'arrière-plan s'étire dynamiquement jusqu'au bas du contenu ?

Limitations

• Aucun élément supplémentaire ne peut être ajouté.
• L'élément latéral doit défiler avec le contenu parent.
• La couleur d'arrière-plan doit s'étendre du haut vers le bas du conteneur.
• L'élément side ne peut pas avoir son propre débordement : auto.
• La solution doit être dynamique et ne pas reposer sur une hauteur fixe.

Analyse

Partie I : Couleur de fond

Les propriétés d'arrière-plan CSS s'étendent jusqu'aux bordures de l'élément, sans compter la zone de marge. Dans ce cas, la zone de débordement se trouve en dehors des bordures de l'élément #body, ce qui entraîne une couleur d'arrière-plan tronquée.

Partie II : Débordement

La propriété overflow contrôle uniquement l'affichage du contenu, pas les arrière-plans. . Le contenu débordant est tronqué, pas l'arrière-plan.

Solution

Ce problème ne peut pas être résolu uniquement avec CSS en raison des limitations mentionnées ci-dessus. Une solution JavaScript est requise.

JavaScript peut ajuster dynamiquement la hauteur de l'élément #body pour qu'elle corresponde à la taille du contenu. Cela garantit que la couleur d'arrière-plan s'étend jusqu'au bas du conteneur.

Voici un exemple d'extrait de code :

document.getElementById("body").style.height = document.documentElement.scrollHeight + "px";

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!