Imposta la larghezza del div posizionato in posizione fissa rispetto al suo padre con larghezza massima

Question

C'è qualche soluzione senza 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; 
} 

non posso aggiungere altri stili per .wrapper tranne width: 100%;. Provo con width: inherit ma non funziona per me perché ho div genitore con solo larghezza massima. source

Ecco JsFiddle Demo

Answer 1

Un elemento position:fixed non è relativo al suo genitore più. Rispetta solo i boudaries della viewport.

MDN Definition:

fisso
Non lasciare spazio per l'elemento. Invece, posizionalo in una posizione specificata rispetto alla finestra dello schermo e non muoverlo quando scorri.

Quindi, qualsiasi width, max-width, o qualsiasi altra cosa proprietà non sarà rispettato dalla elemento fisso.

EDIT

In realtà, non erediterà il width perché non c'è width proprietà definita su un involucro .. Quindi, provare a impostare il bambino come width: 100% ed ereditare la 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

c'è già una larghezza sulla colonna, basta impostare la larghezza dell'elemento fisso da ereditare. nessuna ragione per complicare le cose.

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

sembra che non v'è alcuna soluzione senza JS. Questo post del blog di Felipe Tadeo spiega perché:

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

spiega la confusione intorno width: inherit

"posizioni fisse per sé relativamente alla finestra ... ogni volta che si eredita la larghezza (con posizione fissa) è sarà rispetto al viewport "