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

Vous pouvez utiliser margin pour le conteneur .wrap au lieu de padding pour .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

Answer 2

Essayez d'ajouter une transformation au parent (il n'est pas nécessaire qu'elle fasse quoi que ce soit, il peut s'agir d'une translation nulle) et définissez la largeur de l'enfant fixe à 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>

Answer 3

Qu'en est-il este ?

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

En utilisant jquery, vous pouvez définir n'importe quel type de largeur :)

EDIT : Comme indiqué par dream dans les commentaires, utiliser JQuery juste pour cet effet est inutile et même contre-productif. J'ai fait cet exemple pour les personnes qui utilisent JQuery pour d'autres choses sur leurs pages et qui envisagent de l'utiliser pour cette partie également. Je m'excuse pour les désagréments que ma réponse a pu causer.

Answer 4

Vous pouvez utiliser le positionnement absolu pour fixer le pied de page à la base de la division parent. J'ai également ajouté 10px de padding-bottom au wrap (correspondant à la hauteur du pied de page). Le positionnement absolu est relatif à la division parent plutôt qu'à l'extérieur du flux puisque vous lui avez déjà donné l'attribut position relative.

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/

Answer 5

Man votre conteneur est à 40% de la largeur de l'élément parent

mais lorsque vous utilisez position:fixed, la largeur est basée sur la largeur du viewport(document)...

en y réfléchissant, j'ai réalisé que votre élément parent a un padding de 10% (gauche et droite), ce qui signifie que votre élément a 80% de la largeur totale de la page. donc votre élément fixe doit avoir 40% basé sur 80% de la largeur totale.

il suffit donc de changer votre classe #fixed en

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

si vous utilisez sass, postcss ou un autre compilateur css, vous pouvez utiliser des variables pour éviter de casser la mise en page lorsque vous modifiez la valeur du padding de l'élément parent.

voici le violon mis à jour http://jsfiddle.net/C93mk/2343/

J'espère que cela vous aidera, salutations