Ustaw stały element div na 100% szerokości kontenera nadrzędnego

Mam otokę z pewnym dopełnieniem, a następnie mam pływający względny element div z procentową szerokością (40%).

Wewnątrz pływającego względnego elementu div mam stały element div, który chciałbym mieć taki sam rozmiar jak jego element nadrzędny. Rozumiem, że ustalony element div jest usuwany z przepływu dokumentu i jako taki ignoruje dopełnienie opakowania.

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;
}

Oto obowiązkowe skrzypce: http://jsfiddle.net/C93mk/489/

Czy ktoś wie, jak to osiągnąć?

Poprawiłem skrzypce, aby pokazać więcej szczegółów na temat tego, co próbuję osiągnąć, przepraszam za zamieszanie: http://jsfiddle.net/EVYRE/4/

Możesz użyć marginesu dla kontenera .wrap zamiast dopełnienia dla .wrapper:

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

A co powiesz na to ?

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

Używając jquery możesz ustawić dowolną szerokość :)

EDYCJA: Jak stwierdzono we śnie w komentarzach, używanie JQuery tylko dla tego efektu jest bezcelowe, a nawet nieproduktywne. Zrobiłem ten przykład dla osób, które używają JQuery do innych rzeczy na swoich stronach i rozważają użycie go również w tej części. Przepraszamy za wszelkie niedogodności spowodowane moją odpowiedzią.

Spróbuj dodać transformację do rodzica (nie musi nic robić, może być zerowym tłumaczeniem) i ustaw stałą szerokość dziecka na 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>

Możesz użyć pozycjonowania bezwzględnego, aby przypiąć stopkę do podstawy nadrzędnego elementu DIV. Dodałem również 10px padding-bottom do zawijania (dopasuj wysokość stopki). Pozycjonowanie bezwzględne jest względne względem nadrzędnego elementu div, a nie poza przepływem, ponieważ nadałeś mu już atrybut względnej pozycji.

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/

man twój kontener ma 40% szerokości elementu nadrzędnego

ale kiedy używasz position: fixed, szerokość jest oparta na szerokości rzutni (dokumentu) ...

myśląc o tym, zdałem sobie sprawę, że twój element nadrzędny ma 10% wypełnienia (lewy i prawy), co oznacza, że ​​twój element ma 80% całkowitej szerokości strony. więc twój stały element musi mieć 40% na podstawie 80% całkowitej szerokości

więc wystarczy zmienić swoją #fixed klasę na

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

jeśli używasz sass, postcss lub innego kompilatora css, możesz użyć zmiennych, aby uniknąć uszkodzenia układu podczas zmiany wartości dopełnienia elementu nadrzędnego.

tutaj jest zaktualizowane skrzypce http://jsfiddle.net/C93mk/2343/

mam nadzieję, że to pomoże, pozdrawiam

Oprócz ostatniego ostatniego jsfiddle przegapiłeś jedną rzecz:

#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*/
}

Ale jak to rozwiąże Twój problem? Proste, najpierw wyjaśnijmy, dlaczego jest większe niż oczekiwano.

Element stały #sidebarużyje rozmiaru okna jako podstawy, aby uzyskać swój własny rozmiar, tak jak każdy inny stały element, gdy w tym elemencie zostanie zdefiniowany width:inheriti #sidebar_wrapma 40% jako wartość szerokości, to obliczywindow.width * 40% , kiedy szerokość twojego okna jest większa niż twoja .containerszerokość #sidebarbędzie większa niż #sidebar_wrap.

W ten sposób musisz ustawić maksymalną szerokość w swoim #sidebar_wrap , aby nie była większa niż #sidebar_wrap.

Sprawdź ten plik jsfiddle, który pokazuje działający kod i wyjaśnij lepiej, jak to działa.

Usuń Padding: 10%;lub użyj piksela zamiast procentu dla.wrap

zobacz przykład: 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;

}