設置固定位置的div相對於他的父母有最大寬度的寬度

Question

有沒有沒有JS的解決方案？

HTML

<div class="wrapper"> 
    <div class="fix"></div> 
</div> 

CSS

.wrapper { 
max-width: 500px; 
border: 1px solid red; 
height: 5500px; 
position: relative; 
} 


.fix { 
width: inherit; 
height: 20px; 
position:fixed; 
background: black; 
} 

我不能添加任何其他樣式.wrapper除了width: 100%;。 我嘗試width: inherit，但它不適用於我，因爲我有隻有最大寬度的父div。 source

這裏是JsFiddle Demo

Answer 1

甲position:fixed元件不能相對於它的父了。它僅尊重視口的badaries。

MDN Definition：

固定
不要爲元素留出空間。相反，將其放置在相對於屏幕視口的指定位置，並且在滾動時不要移動它。

所以任何width，max-width，或任何屬性將不會被固定的元素。

編輯

事實上，它不會繼承width因爲有在包裝中沒有定義width財產。所以，嘗試設置孩子一樣width: 100%和繼承max-width：

http://jsfiddle.net/mx6anLuu/2/

.wrapper { 
    max-width: 500px; 
    border: 1px solid red; 
    height: 5500px; 
    position: relative; 
} 


.fix { 
    max-width: inherit; 
    width: 100%; 
    height: 20px; 
    position:fixed; 
    background: black; 
} 

Answer 2

列上已經有一個寬度，只需設置要繼承的固定元素的寬度即可。沒有理由使事情複雜化。

CSS：

.col-sm-3 { width: 25%; } 
.fixed-in-col { width: inherit; ... } 

HTML：

<div class="col-sm-3"> 
    <div class="fixed-in-div"> 
     ... 
    </div> 
</div> 

Answer 3

似乎有沒有JS無解。 本博客文章由菲利普塔德奧解釋了原因：

https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied

它解釋本身相對於視各地width: inherit

「固定位置的混亂......只要你繼承的寬度（與位置固定的），它將與視口相關「