Sabit bir div'i üst kapsayıcının% 100 genişliğine ayarlayın

Biraz dolgulu bir sarmalayıcım var, sonra yüzde genişliği (% 40) olan bir kayan göreli div var.

Kayan göreli div içinde, üst öğesiyle aynı boyutta olmasını istediğim sabit bir div var. Belgenin akışından sabit bir div çıkarıldığını ve bu nedenle paketleyicinin dolgusunu yok saydığını anlıyorum.

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

İşte zorunlu keman: http://jsfiddle.net/C93mk/489/

Bunu başarmanın bir yolunu bilen var mı?

Başarmaya çalıştığım şey hakkında daha fazla ayrıntı göstermek için keman üzerinde değişiklik yaptım, kafa karışıklığından dolayı üzgünüm: http://jsfiddle.net/EVYRE/4/

.Wrapper için dolgu yerine .wrap kapsayıcısı için kenar boşluğunu kullanabilirsiniz:

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

Nasıl hakkında bu ?

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

Jquery kullanarak her türlü genişliği ayarlayabilirsiniz :)

DÜZENLEME: Yorumlarda rüyada belirtildiği gibi, JQuery'yi sadece bu etki için kullanmak anlamsız ve hatta verimsizdir. Bu örneği, sayfalarındaki diğer şeyler için JQuery kullanan ve bu kısım için de kullanmayı düşünen insanlar için yaptım. Cevabımın verdiği rahatsızlıktan dolayı özür dilerim.

Ebeveyne bir dönüşüm eklemeyi deneyin (hiçbir şey yapmak zorunda değildir, sıfır çeviri olabilir) ve sabit alt öğenin genişliğini% 100 olarak ayarlayın

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>

Altbilgiyi üst div'in tabanına sabitlemek için mutlak konumlandırmayı kullanabilirsiniz. Ayrıca sargıya 10px padding-bottom ekledim (altbilgi yüksekliğiyle eşleşir). Mutlak konumlandırma, akışın dışından ziyade üst div'e görelidir, çünkü ona konumla ilgili özniteliği zaten vermişsinizdir.

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/

adam, kapsayıcınız ana öğenin genişliğinin% 40'ı kadar

ancak position: fixed seçeneğini kullandığınızda, genişlik görüntü alanı (belge) genişliğine bağlıdır ...

düşündüğümde, ana öğenizin% 10 dolgusuna (sol ve sağ) sahip olduğunu fark ettim, bu, öğenizin toplam sayfa genişliğinin% 80'ine sahip olduğu anlamına gelir. bu nedenle, sabit öğeniz toplam genişliğin% 80'ine dayalı olarak% 40'a sahip olmalıdır

bu yüzden #fixed sınıfınızı şu şekilde değiştirmeniz yeterlidir:

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

sass, postcss veya başka bir css derleyici kullanırsanız, ana öğenin dolgu değerini değiştirdiğinizde düzeni bozmamak için değişkenler kullanabilirsiniz.

işte güncellenmiş keman http://jsfiddle.net/C93mk/2343/

umarım yardımcı olur saygılarımla

En son jsfiddle'ınıza ek olarak , bir şeyi kaçırdınız:

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

Peki bu, probleminizi nasıl çözecek? Basit, önce neden beklenenden daha büyük olduğunu açıklayalım.

Sabit öğe #sidebar, diğer tüm sabit öğeler gibi kendi boyutunu elde etmek için temel olarak pencere genişliği boyutunu kullanır, bu öğede bir kez tanımlandığında width:inheritve #sidebar_wrapgenişlik değeri% 40'a window.width * 40%ulaştığında, pencere genişliğinizin .containergenişlik, #sidebardaha büyük olacaktır #sidebar_wrap.

Bu şekilde, #sidebar_wrapdaha büyük olmasını önlemek için bir maksimum genişlik ayarlamanız gerekir #sidebar_wrap.

Çalışan bir kodu gösteren bu jsfiddle'ı kontrol edin ve bunun nasıl çalıştığını daha iyi açıklayın.

Kaldır Padding: 10%;veya kullanım px yerine yüzde için.wrap

örneğe bakın: 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;

}