如何设置固定元素相对于其父元素的宽度？

理解相对于父级的固定元素宽度

在定义固定 div 相对于其父级的宽度时，当固定元素看起来像时就会出现挑战而是占据整个窗口宽度。这是因为固定定位会将元素从正常流中移除，导致其独立于其父元素的宽度。

解决方案：继承父元素宽度

解决此问题，解决办法就是继承父div的宽度。通过添加宽度：继承；对于所有内部 div，固定元素将采用其直接父元素的宽度。

JavaScript 替代方案

对于不支持 width:inherit; 的旧版浏览器，a可以采用 JavaScript 解决方法。它涉及在页面大小调整或内容更改时使用函数显式设置固定元素的宽度。这可以确保固定元素与其父元素保持所需的关系。

示例和演示

宽度的示例实现：继承；可以在这里找到：https://jsfiddle.net/4bGqF/9/。或者，可以按如下方式实现 JavaScript 解决方案：

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

以上是如何设置固定元素相对于其父元素的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！