Setzen Sie ein festes div auf 100% Breite des übergeordneten Containers

Ich habe einen Wrapper mit etwas Polsterung, dann habe ich einen schwebenden relativen Div mit einer prozentualen Breite (40%).

Innerhalb des schwebenden relativen Div habe ich ein festes Div, das die gleiche Größe wie das übergeordnete haben soll. Ich verstehe, dass ein festes Div aus dem Fluss des Dokuments entfernt wird und als solches das Auffüllen des Wrappers ignoriert.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Hier ist die obligatorische Geige: http://jsfiddle.net/C93mk/489/

Kennt jemand einen Weg, dies zu erreichen?

Ich habe die Geige geändert, um detaillierter zu zeigen, was ich erreichen möchte. Entschuldigen Sie die Verwirrung: http://jsfiddle.net/EVYRE/4/

Sie können den Rand für den .wrap-Container verwenden, anstatt den .wrapper aufzufüllen:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

Wie wäre es damit ?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Mit jquery kannst du jede Art von Breite einstellen :)

BEARBEITEN: Wie von dream in den Kommentaren angegeben, ist die Verwendung von JQuery nur für diesen Effekt sinnlos und sogar kontraproduktiv. Ich habe dieses Beispiel für Leute gemacht, die JQuery für andere Dinge auf ihren Seiten verwenden und erwägen, es auch für diesen Teil zu verwenden. Ich entschuldige mich für die Unannehmlichkeiten, die meine Antwort verursacht hat.

Versuchen Sie, dem Elternteil eine Transformation hinzuzufügen (muss nichts tun, könnte eine Null-Übersetzung sein) und setzen Sie die Breite des festen Kindes auf 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

Sie können die absolute Position verwenden, um die Fußzeile an der Basis des übergeordneten Divs zu befestigen. Ich habe dem Wickel auch 10px Polsterung hinzugefügt (passend zur Höhe der Fußzeile). Die absolute Positionierung ist relativ zum übergeordneten div und nicht außerhalb des Flusses, da Sie ihm bereits das Attribut position relativ angegeben haben.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

Mann Ihr Container ist 40% der Breite des übergeordneten Elements

Wenn Sie jedoch position: fixed verwenden, basiert die Breite auf der Breite des Ansichtsfensters (Dokuments) ...

Als ich darüber nachdachte, stellte ich fest, dass Ihr übergeordnetes Element 10% Abstand hat (links und rechts). Dies bedeutet, dass Ihr Element 80% der gesamten Seitenbreite hat. Ihr festes Element muss also 40% haben, basierend auf 80% der Gesamtbreite

Sie müssen also nur Ihre # fixed-Klasse in ändern

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

Wenn Sie sass, postcss oder einen anderen CSS-Compiler verwenden, können Sie Variablen verwenden, um zu vermeiden, dass das Layout beschädigt wird, wenn Sie den Füllwert des übergeordneten Elements ändern.

Hier ist die aktualisierte Geige http://jsfiddle.net/C93mk/2343/

Ich hoffe es hilft, Grüße

Zusätzlich zu Ihrer letzten jsfiddle haben Sie nur eines verpasst:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

Aber wie wird dies Ihr Problem lösen? Einfach, lassen Sie uns erklären, warum größer ist als erwartet.

Das feste Element #sidebarverwendet die Fensterbreitengröße als Basis, um wie jedes andere feste Element eine eigene Größe zu erhalten. Sobald dieses Element definiert ist width:inheritund #sidebar_wrap40% als Breitenwert hat, wird es berechnet window.width * 40%und dann, wenn Ihre Fensterbreite größer als Ihre ist .containerBreite #sidebarwird größer sein als #sidebar_wrap.

Auf diese Weise müssen Sie eine maximale Breite in Ihrem einstellen #sidebar_wrap, um zu verhindern, dass sie größer als ist #sidebar_wrap.

Überprüfen Sie diese jsfiddle , die einen Arbeitscode zeigt, und erklären Sie besser, wie dies funktioniert.

Entfernen Padding: 10%;oder verwenden Sie px anstelle von Prozent für.wrap

siehe das Beispiel: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}