How to Make a Fixed Positioned Div Inherit the Width of Its Parent?

Relative Width of Positioned Fixed Div

When attempting to set a div with fixed positioning to the full width of its parent div, some challenges can arise. Let's explore the issue and find a solution.

Problem Description

In the provided example, a div with the fixed position is not inheriting the width of its parent. Instead, it extends to the width of the entire window.

Solution

To resolve this, apply the CSS property width: inherit to any inner divs within the parent div. This tells the fixed div to inherit its width from its parent.

#container {
    width: 800px;
}

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

#fixed div {
    width: inherit;
}

Implementation

For browsers that do not support width: inherit, consider using a JavaScript solution. This might be necessary for older browsers.

The above is the detailed content of How to Make a Fixed Positioned Div Inherit the Width of Its Parent?. For more information, please follow other related articles on the PHP Chinese website!