如何設定固定元素相對於其父元素的寬度？

理解相對於父級的固定元素寬度

在定義固定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中文網其他相關文章！