Comment définir la largeur d'un élément fixe par rapport à son parent ?

Comprendre la largeur d'un élément fixe par rapport au parent

En définissant la largeur d'un div fixe par rapport à son parent, le défi se pose lorsque l'élément fixe semble pour occuper toute la largeur de la fenêtre. En effet, le positionnement fixe supprime l'élément du flux normal, ce qui le rend indépendant de la largeur de son parent.

Solution : hériter de la largeur du parent

Pour résoudre ce problème , la solution réside dans l'héritage de la largeur du div parent. En ajoutant width:herit; à tous les divs internes, l'élément fixe adoptera la largeur de son parent immédiat.

Alternative JavaScript

Pour les navigateurs plus anciens qui ne prennent pas en charge la largeur : hériter;, un Une solution de contournement JavaScript peut être utilisée. Cela implique d'utiliser une fonction pour définir explicitement la largeur de l'élément fixe chaque fois que la page est redimensionnée ou que le contenu change. Cela garantit que l'élément fixe maintient la relation souhaitée avec son parent.

Exemple et démonstration

Un exemple d'implémentation avec width :heritate; peut être trouvé ici : https://jsfiddle.net/4bGqF/9/. Alternativement, une solution JavaScript peut être implémentée comme suit :

// Get the parent div's width
var parentWidth = document.getElementById("container").offsetWidth;

// Apply the width to the fixed div
document.getElementById("fixed").style.width = parentWidth + "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!