How to Make Fixed Divs Responsive to Their Parent Width?

Positioning Fixed Divs Relative to Parent Elements

When attempting to set the width of a div with position: fixed, users may encounter difficulties if they desire the width to be relative to its parent div. However, by default, fixed elements inherit their width from the document or window.

解决方案

To resolve this issue, apply the following CSS attribute to the parent div:

width:inherit;

This instructs inner divs within the parent div to inherit the width of the parent div. As a result, the fixed div's width will be relative to its parent div, providing the desired layout.

Example

<div>
<pre class="brush:php;toolbar:false">#container {
  width: inherit;
}

#fixed {
  position: fixed;
  width: 100%;
}

Note:

If specific browsers require width inheritance support, consider implementing a JavaScript-based solution. However, for most modern browsers, applying "width: inherit" to the parent div should resolve this issue effectively.