Définir la largeur de fixe positionné div par rapport à son parent ayant la max-width

Est-il une solution sans JS?

html

<div class="wrapper">
   <div class="fix"></div>
</div>

css

.wrapper {
max-width: 500px;
border: 1px solid red;
height: 5500px;
position: relative;
}


.fix {
width: inherit;
height: 20px;
position:fixed;
background: black;
}

Je ne peux pas ajouter tous les autres styles pour .wrapper sauf width: 100%;.
J'ai essayer avec width: inherit mais il ne fonctionne pas pour moi car j'ai div parent avec seulement max-width. source

Ici est JsFiddle Démo

OriginalL'auteur CroaToa | 2014-09-23

  1. 22

    Un position:fixed élément n'est pas par rapport à son parent plus. Il ne respecte que la fenêtre d'affichage de leurs contours.

    MDN Définition:

    fixe

    Ne pas laisser d'espace pour l'élément. Au lieu de cela, le placer dans une position donnée par rapport à l'écran de la fenêtre d'affichage et ne pas la déplacer lorsque le défilement.

    De sorte que toute width, max-width, ou quel que soit le bien ne sera pas respecté par l'élément fixe.

    MODIFIER

    En fait, il ne sera pas hérité de la width car il n'y a pas de width propriété est définie sur l'emballage.. Donc, essayez de définir l'enfant comme width: 100% et hériter de la max-width:

    http://jsfiddle.net/mx6anLuu/2/

    .wrapper {
    max-width: 500px;
    border: 1px solid red;
    height: 5500px;
    position: relative;
}


.fix {
    max-width: inherit;
    width: 100%;
    height: 20px;
    position:fixed;
    background: black;
}
    Cela ne veut pas dire qu'il ne sera pas hérité de la width de parent par inherit valeur.
    c'est vrai... La vérité est qu'il ne pas hériter de la width car il n'y a pas de width dans le parent... j'ai mis à jour la réponse.
    Merci man! 🙂
    Merci, résolu mon problème
    Fonctionne comme un charme, merci. Je pense que vous devriez supprimer cette "Donc toute la largeur, max-width, ou quel que soit le bien ne sera pas respecté par l'élément fixe" car il n'est pas strictement vrai: si le parent a une largeur puis réglage de la largeur: inherit (pas width: 100%) sur la position fixe de l'enfant sera beau travail.

    OriginalL'auteur LcSalazar

  2. 1

    il y a déjà un largeur de la colonne, il suffit de régler la largeur de l'élément fixe d'hériter. aucune raison de compliquer les choses.

    CSS:

    .col-sm-3 { width: 25%; }
.fixed-in-col { width: inherit; ... }

    HTML:

    <div class="col-sm-3">
    <div class="fixed-in-div">
        ...
    </div>
</div>

    OriginalL'auteur Justin St. Germain

  3. 0

    Il semble qu'il n'y a pas de solution sans JS.
    Cet article de blog par Felipe Tadeo explique pourquoi:

    https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied

    Il explique la confusion autour de width: inherit

    "Position fixe à lui-même par rapport à la fenêtre d'affichage... à chaque fois que vous héritez de la largeur (position fixe), il sera à l'égard de la fenêtre d'affichage"

    OriginalL'auteur Sam Henderson