Come posso creare una larghezza ereditaria posizionata in modo fisso di genitore?

Question

C'è un modo in cui un div posizionato in posizione fissa può ereditare la larghezza di un genitore?

So larghezza fissa è relativo alla finestra di quindi questo codice non funziona:

#wrapper{ 
 
     position: relative; 
 
     width:500px; 
 
     height: 20px; 
 
     background-color: blue; 
 
} 
 

 
#header{ 
 
     position: fixed; 
 
     width: 100%; 
 
     height: 20px; 
 
     background-color: rgba(255,0,0,0.5); 
 
}

<div id="wrapper"> 
 
    #wrapper 
 
     <div id="header"> 
 
      #header 
 
     </div> 
 
    </div> 
 

 

Answer 1

Utilizzare il valore per la proprietà width sul selettore #header.

perché questo funziona

Specificando position: fixed all'elemento #header, la posizione dell'elemento #header è calcolata rispetto alla finestra di visualizzazione, come specificato nelle specifiche CSS2:

http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#positioning-scheme

Tuttavia , position: fixed non modifica la struttura DOM, il che significa che il #wrapper elemento è ancora il genitore dell'elemento #header. Come conseguenza , il #header può ancora ereditare i valori di proprietà dal suo elemento padre, anche se la sua posizione è determinata rispetto al viewport.

Si noti inoltre che se si specifica un valore percentuale per la larghezza, l'elemento fisso calcolerà il valore in base al viewport, come indicato nella specifica. Tuttavia, questo non appartiene a width: inherit, che prende il suo valore dall'elemento padre, non dalla finestra.

Vedi: http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-width

Ad esempio, se si aggiunge la proprietà color per #wrapper, sarebbe ereditato dalla #header.

La distinzione è che il valore iniziale/predefinito per width è auto mentre per color è inherit. Per ottenere la proprietà del genitore, è necessario specificare width: inherit, non width: 100%;

Nota: C'è una sottile distinzione tra l'elemento padre e il blocco contenitore. Nella maggior parte dei casi, i due sono uguali, ma per gli elementi posizionati fissi, sono diversi.

#wrapper { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 20px; 
 
    background-color: blue; 
 
    color: white; /* for demo */ 
 
} 
 
#header { 
 
    position: fixed; 
 
    width: inherit; 
 
    height: 20px; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
}

<div id="wrapper"> 
 
    #wrapper 
 
    <div id="header"> 
 
    #header 
 
    </div> 
 
</div>

Answer 2

Change

#wrapper{ 
    position: relative; 
    width:500px; 
} 

a

#wrapper{ 
    position: absolute; 
    width:500px; 
}