Définissez un div sur 100% de la largeur du conteneur parent

J’ai un wrapper avec un peu de remplissage, j’ai alors un div relatif flottant avec un pourcentage de largeur (40%).

A l’intérieur du div relatif flottant j’ai un div fixe que je voudrais avoir la même taille que son parent. Je comprends qu’un div fixe est supprimé du stream du document et ignore le remplissage de l’encapsuleur.

HTML

Some relative item placed item

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/

Est-ce que quelqu’un connaît un moyen d’accomplir cela?

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/

Vous pouvez utiliser la marge pour le conteneur .wrap au lieu du remplissage 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

Comment ça ?

 $( 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 pour cet effet est inutile et même contre-productif. J’ai fait cet exemple pour ceux qui utilisent JQuery pour d’autres éléments sur leurs pages et envisagent de l’utiliser également pour cette partie. Je m’excuse pour tout inconvénient que ma réponse a causé.

Vous pouvez utiliser le positionnement absolu pour épingler le pied de page à la base du div parent. J’ai aussi ajouté 10px padding-bottom au wrap (correspond à la hauteur du footer). Le positionnement absolu est relatif au div parent plutôt qu’à l’extérieur du stream puisque vous lui avez déjà atsortingbué l’atsortingbut relatif à la position.

 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/

Essayez d’append une transformation au parent (n’a rien à faire, peut être une traduction 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; } 
 
Some relative item placed item

En plus de votre dernier jsfiddle , vous venez de rater 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? Simple, explique pourquoi est plus grand que prévu en premier.

L’élément fixe #sidebar utilisera la taille de la fenêtre comme base pour obtenir sa propre taille, comme tous les autres éléments fixes, une fois que cet élément est défini, width:inherit #sidebar_wrap et #sidebar_wrap ont 40% de valeur en largeur, puis calculera window.width * 40% , alors si la largeur de votre fenêtre est supérieure à votre largeur #sidebar , #sidebar sera plus grande que #sidebar_wrap .

C’est comme ça, vous devez définir un max-width dans votre #sidebar_wrap , pour éviter d’être plus grand que #sidebar_wrap .

Vérifiez ce jsfiddle qui montre un code de travail et expliquez mieux comment cela fonctionne.

man votre conteneur est 40% de la largeur de l’élément parent

mais quand vous utilisez la position: fixed, la largeur est basée sur la largeur de la fenêtre d’affichage (document) …

En réfléchissant, j’ai réalisé que votre élément parent avait un remplissage de 10% (gauche et droite), cela signifie que votre élément a 80% de la largeur totale de la page. de sorte que votre élément fixe doit avoir 40% basé sur 80% de la largeur totale

il vous 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 disposition lorsque vous modifiez la valeur de remplissage de l’élément parent.

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

j’espère que ça aide

Retirer le Padding: 10%; ou utilisez px au lieu de pour cent pour .wrap

voir l’exemple: http://jsfiddle.net/C93mk/493/

HTML:

 
Some relative item placed item

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