Définir la largeur d'un "Position: fixed" div par rapport à la div parent

Question

Je suis en train de donner un div (position: fixed) la largeur de 100% (relatif à la div parent). Mais j'ai quelques problèmes...

EDIT: Le premier problème est sovled en utilisant l'héritage, mais cela ne fonctionne toujours pas. Je pense que le problème c'est que je suis à l'aide de plusieurs divs qui prennent le 100%/inherit largeur. Vous pouvez trouver le deuxième problème sur le jsfiddle mise à jour: http://jsfiddle.net/4bGqF/7/

Fox exemple

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

et le html

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

Ou vous pouvez essayer: http://jsfiddle.net/4bGqF/

Les problèmes semble être que l' élément fixe est toujours en prenant la largeur de la fenêtre de document. Personne ne sait comment le résoudre ce problème?

Je ne peux pas donner mon élément fixe fixe avec, parce que je suis en utilisant le jScrollPane plugin. Il dépend du contenu qu'il y a une barre de défilement ou pas.

Merci beaucoup!

PS: le texte de La 2 divs sont sur le dessus les uns des autres. C'est juste un exemple, donc ça ne compte pas vraiment.

Answer 1

Je ne sais pas ce qu'est le second problème est (basé sur votre modifier), mais si vous appliquez width:inherit à tous les intérieurs vrd, ça fonctionne: http://jsfiddle.net/4bGqF/9/

Vous voudrez peut-être regarder dans une solution d'activer javascript pour les navigateurs que vous avez besoin de soutien, et que ne pas appuyer width:inherit

Answer 2

Utilisez ce CSS:

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

Le #élément fixe en hériteront parent de la largeur, de sorte qu'il sera à 100% de ce.

Answer 3

Correction du positionnement est censé définir tout par rapport à la fenêtre d'affichage, de sorte position:fixed est toujours à faire. Essayez d'utiliser position:relative sur l'enfant div à la place. (Je me rends compte que vous pourriez avoir besoin de la correction du positionnement pour d'autres raisons, mais si tu ne peux pas vraiment faire de la largeur de match il est parent avec JS sans inherit)

Answer 4

Voici l'astuce que j'ai utilisé.

E. g. J'ai eu ce code HTML:

<div class="head">

<div id="fx">123</div>

</div>

et pour faire #fx fixe à l'intérieur .la tête, de sorte que la solution de contournement consiste à ajouter un div comme un conteneur pour #fx avec position:absolute comme ceci:

<div class="head">
    <div class="area_for_fix">
        <div id="fx">123</div>
    </div>
</div>

Voici le CSS:

.head{
        min-width:960px;
        width:960px;
        nax-width:1400px;
        height:300px;
        border: 1px solid #000;
        **position:relative;**
        margin:0 auto;
        margin-top:50px;
        padding:20px;
        text-align:right;
        height:1500px;
    }

    .area_for_fix{

        **position:absolute;**
        right:0;
        width:150px;
        height:200px;
        background-color:red;
    }


    #fx{
        width:150px;
        height:75px;
        background-color:#ccc;
        **position:fixed;**




    }

Important: ne pas définir top et left pour #fx, définir ces attributs sur l' .area_for_fix.