How to Set a Fixed Element's Width Relative to its Parent?

Understanding Fixed Element Width Relative to Parent

In defining a fixed div's width relative to its parent, the challenge arises when the fixed element seems to take up the entire window width instead. This is because fixed positioning removes the element from the normal flow, resulting in it being independent of its parent's width.

Solution: Inherit Parent Width

To solve this issue, the solution lies in inheriting the parent div's width. By adding width: inherit; to all inner divs, the fixed element will adopt the width of its immediate parent.

JavaScript Alternative

For older browsers that do not support width: inherit;, a JavaScript workaround can be employed. It involves using a function to set the fixed element's width explicitly whenever the page is resized or the content changes. This ensures that the fixed element maintains the desired relationship with its parent.

Example and Demonstration

An example implementation with width: inherit; can be found here: https://jsfiddle.net/4bGqF/9/. Alternatively, a JavaScript solution can be implemented as follows:

// 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";

The above is the detailed content of How to Set a Fixed Element's Width Relative to its Parent?. For more information, please follow other related articles on the PHP Chinese website!