L'attribution CSS largeur d'un position:fixed élément

Je voudrais un élément fixe de la largeur de correspondre à celui de la div placé immédiatement au-dessous. Imaginez un en-tête et un div du contenu principal. Un problème dans la correspondance de leurs largeurs se produit lorsque l'en-tête et le contenu divs sont imbriquées à l'intérieur d'un div extérieure. Dans ce scénario, le % de la largeur de chaque ne correspondent plus à leurs parents largeur (par exemple,<body> tag) et l'élément fixe la largeur est basée sur quelque chose qui est source de confusion pour moi.

Pour mieux expliquer ce que je veux dire, le contraste de ces deux js violons:

  1. http://jsfiddle.net/2dudX/4/
    vs
  2. http://jsfiddle.net/2dudX/10/

voici le code pour chaque:

<div id="fixed"></div>
<div id="content"></div>​

#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

vs

<div id="main">
   <div id="fixed"></div>
   <div id="content"></div>    
</div > 

#main{ width:95%}
#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

Remarque que dans jsfiddle #1 faire le jaune et le rouge divs largeurs correspondent indépendamment de la façon dont vous redimensionner le navigateur. Malheureusement, jsfiddle#2 est plus un monde réel scénario et je me demandais comment faire pour corriger les id="fixed" div tels que sa largeur correspond également avec id="content" div.

Pensées?

vérifier modifier ci-dessous, seule viens de voir la note sur la correspondance de la largeur.

OriginalL'auteur tim peterson | 2012-08-25

  1. 5

    Vous pouvez de cette façon VIOLON (pour fixer % par rapport à la #principal)
    élément fixe de dimensions toujours est calculée par rapport à l'élément racine, de sorte que vous devez le réinitialiser %-unité en conséquence
    dans ce cas particulier, vous devez définir:

    #fixed {
    width: 85.5%;
}

    C'est le cas #main est de 95%, votre élément statique est de 90% par rapport à la principale. Donc, vous devez calculer la largeur vers l'élément racine (1 * .95 * .9 = .855)

    -@caligula, merci de ce que vous dites est de plusieurs les deux pour cent des largeurs (.95*.90=.85.5)?
    Et vous devez assurez-vous de définir l'objet s'adapter correctement. Je viens d'avoir une image d'objet-fit: la couverture, la Taille a été foiré. De l'objet-fit: contenir; il fixe.

    OriginalL'auteur user907860

  2. 4

    Facile, mon ami. Largeur fixe les éléments sont arrachés de leurs parents et sont maintenant par rapport à la largeur de la fenêtre, de sorte que dans ces deux situations, le fixe div est toujours par rapport à la taille de la fenêtre, mais quand dans un conteneur parent avec une largeur de 100% de l'élément fixe restera par rapport à la largeur de la fenêtre, mais la non-correction de la position de l'élément est maintenant par rapport au parent de largeur. Donc, la non-correction d'un élément est devenu de 90% des 95% de la fenêtre tandis que l'élément fixe est resté une constante de 90% de la fenêtre.

    Edit:

    Si vous souhaitez faire correspondre les largeurs que vous pouvez utiliser jquery comme ceci:

    $(function(){
    $('#fixed').width($('#content').outerWidth());
});
    Aucun moyen de le faire en utilisant simplement CSS sans avoir à obtenir la calculatrice? Je déteste faire des JS style de manipulation.

    OriginalL'auteur CoreyRS