Stellen Sie die Breite des fest positionierten div relativ zu seinem übergeordneten Element mit der maximalen Breite ein

Question

Gibt es eine Lösung ohne 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; 
} 

ich irgendwelche anderen Arten für .wrapper außer width: 100%; hinzufügen kann nicht. Ich versuche mit width: inherit aber es funktioniert nicht für mich, weil ich Eltern div mit nur max-width. source

Hier ist JsFiddle Demo

Answer 1

A position:fixed Element auf seine Eltern nicht mehr relativ ist. Es respektiert nur die Boudaries des Darstellungsbereichs.

MDN Definition:

Fest
Sie für das Element nicht Raum verlassen. Positionieren Sie es stattdessen an einer bestimmten Position relativ zum Ansichtsfenster des Bildschirms und verschieben Sie es nicht beim Scrollen.

So ein width, max-width, oder was auch immer Eigenschaft wird nicht von dem festen Elemente respektiert werden.

EDIT

In der Tat wird es nicht die width erben, weil es keine auf der Verpackung definiert width Eigenschaft ist .. Also, versuchen Sie, das Kind als width: 100% Einstellung und erben die 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

Es gibt bereits eine Breite für die Spalte, legen Sie einfach die Breite des festen Elements zu erben. kein Grund, Dinge zu komplizieren.

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

Es scheint, dass es keine Lösung ohne JS ist. Dieser Blog-Eintrag von Felipe Tadeo erklärt, warum:

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

Es die Verwirrung um width: inherit

„Fest positioniert ichduersiees gegenüber dem Ansichtsfenster erklärt ..., wenn Sie erben Breite es (mit Position fixiert) wird in Bezug auf das Ansichtsfenster sein "