web-dev-qa-db-fra.com

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

Existe-t-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 d'autres styles pour .wrapper à l'exception de width: 100%;. J'essaie avec width: inherit mais cela ne fonctionne pas pour moi car j'ai parent div avec seulement max-width. la source

Voici JsFiddle Demo

htmlcsscss3css-position
12
CroaToa

Un élément position:fixed n'est plus relatif à son parent. Il ne respecte que les limites de la fenêtre.

Définition MDN :

fixe  
Ne laissez pas d’espace pour l’élément. Au lieu de cela, placez-le à une position spécifiée par rapport à la fenêtre d'affichage et ne le déplacez pas lorsque vous le faites défiler.

Donc, toute variable width, max-width ou autre ne sera pas respectée par l'élément fixe.

EDIT

En fait, il n'héritera pas de la width car il n'y a pas de propriété width définie sur le wrapper. Essayez donc de définir l'enfant en tant que width: 100% et héritez du 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;
}
22
LcSalazar

il y a déjà une largeur sur la colonne, il suffit de définir la largeur de l'élément fixe à 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>
1
Justin St. Germain

Il semble qu'il n'y ait pas de solution sans JS. Ce billet de blog de Felipe Tadeo explique pourquoi:

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

Cela explique la confusion autour de width: inherit

"Les positions fixes par rapport à la fenêtre ... chaque fois que vous héritez de la largeur (avec la position fixe), ce sera par rapport à la fenêtre"

0
Sam Henderson