Wie kann ich eine feste positionierte div Erben Breite des Elternteils machen?

Question

Gibt es eine Möglichkeit, wie ein fest positioniertes div die Breite eines Elternelements erben kann?

ich feste Breite weiß, ist relativ zu dem Fenster des so ist dieser Code nicht funktioniert:

#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

Verwenden Sie den inherit Wert für die width Eigenschaft auf dem #header Selektor.

warum das funktioniert

von position: fixed zum #header Element Angabe der Position des #header Element in Bezug auf das Ansichtsfenster berechnet als in der CSS2-Spezifikation festgelegt:

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

jedoch , position: fixed ändert nicht die DOM-Struktur, was bedeutet, dass die #wrapper Element ist immer noch das übergeordnete Element des Elements #header. Als eine Konsequenz kann die #header Eigenschaft Werte noch von seinem übergeordneten Element erben, obwohl seine Position in Bezug auf das Ansichtsfenster bestimmt wird.

Beachten Sie außerdem, dass das fixierte Element den Wert basierend auf dem Ansichtsfenster berechnet, wenn Sie einen Prozentwert für die Breite angeben, wie in der Spezifikation angegeben. Dies gilt jedoch nicht für width: inherit, die ihren Wert aus dem übergeordneten Element und nicht aus dem Ansichtsfenster bezieht.

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

Zum Beispiel, wenn Sie die color Eigenschaft #wrapper hinzugefügt, wäre es von #header vererbt werden.

Der Unterschied ist, dass der anfängliche/Standardwert für width ist auto während für color es inherit ist. Um die Parent mit der Eigenschaft zu erhalten, müssen Sie width: inherit, nicht width: 100%;

Hinweis: Es gibt eine feine Unterscheidung zwischen dem übergeordneten Element und dem umschließenden Block. In den meisten Fällen sind die beiden identisch, aber für fest positionierte Elemente sind sie unterschiedlich.

#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

ändern

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

zu

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