Définir un div fixe à 100% de la largeur du conteneur parent

Question

J'ai une enveloppe avec un certain rembourrage, puis une division relative flottante avec un pourcentage de largeur (40 %).

À l'intérieur de la division relative flottante, j'ai une division fixe qui doit avoir la même taille que son parent. Je comprends qu'une division fixe est retirée du flux du document et qu'en tant que telle, elle ignore le remplissage de l'enveloppe.

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

Voici le violon obligatoire : http://jsfiddle.net/C93mk/489/

Quelqu'un connaît-il un moyen d'y parvenir ?

J'ai modifié le violon pour montrer plus de détails sur ce que j'essaie d'accomplir, désolé pour la confusion : http://jsfiddle.net/EVYRE/4/

Answer 1

En plus de votre dernière jsfiddle tu as juste oublié une chose :

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

Mais, comment cela va-t-il résoudre votre problème ? C'est simple, expliquons d'abord pourquoi c'est plus important que prévu.

Élément fixe #sidebar utilisera la largeur de la fenêtre comme base pour obtenir sa propre taille, comme tout autre élément fixe, une fois que cet élément est défini. width:inherit y #sidebar_wrap a 40% comme valeur dans la largeur, alors il calculera window.width * 40% alors, si la largeur de votre fenêtre est plus grande que celle de votre .container largeur, #sidebar sera plus grande que #sidebar_wrap .

De cette façon, vous devez définir une largeur maximale dans votre page d'accueil. #sidebar_wrap pour éviter d'être plus grand que #sidebar_wrap .

Vérifiez ceci jsfiddle qui montre un code fonctionnel et explique mieux comment cela fonctionne.

Answer 2

Retirer Padding: 10%; ou utiliser px au lieu de pour cent para .wrap

voir l'exemple : 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;

}