Définir la largeur d'un div "Position: fixe" par rapport au div parent

J'essaie de donner à un div (position: fixe) la largeur de 100% (par rapport à son div parent). Mais j'ai quelques problèmes ...

EDIT: Le premier problème est résolu en utilisant inherit, mais cela ne fonctionne toujours pas. Je pense que le problème est que j'utilise plusieurs div qui prennent la largeur de 100% / hériter. Vous pouvez trouver le deuxième problème sur la mise à jour de jsfiddle: http://jsfiddle.net/4bGqF/7/

Exemple de Fox

#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 l'essayer: http://jsfiddle.net/4bGqF/

Le problème semble être que l' élément fixe prend toujours la largeur de la fenêtre / du document . Quelqu'un sait-il comment résoudre ce problème?

Je ne peux pas donner à mon élément fixe un fixe avec, car j'utilise le plugin jScrollPane. Cela dépend du contenu, qu'il y ait une barre de défilement ou non.

Merci beaucoup!

PS: Le texte des 2 divs est superposé. Ceci n'est qu'un exemple, donc cela n'a pas vraiment d'importance.

Je ne sais pas quel est le deuxième problème (basé sur votre modification), mais si vous appliquez width:inherità toutes les div internes, cela fonctionne: http://jsfiddle.net/4bGqF/9/

Vous voudrez peut-être rechercher une solution javascript pour les navigateurs que vous devez prendre en charge et qui ne le prennent pas en charge width:inherit

Comme beaucoup de gens l'ont commenté, le design réactif définit très souvent la largeur par%

width:inherithéritera de la largeur CSS PAS de la largeur calculée - ce qui signifie que le conteneur enfant héritewidth:100%

Mais, je pense, presque aussi souvent des ensembles de conception responsive max-width, donc:

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

Cela a fonctionné de manière très satisfaisante pour résoudre mon problème consistant à restreindre un menu collant à la largeur d'origine du parent chaque fois qu'il était "bloqué"

Le parent et l'enfant adhéreront à la width:100%si la fenêtre est inférieure à la largeur maximale. De même, les deux adhéreront au max-width:800pxlorsque la fenêtre est plus large.

Il fonctionne avec mon thème déjà réactif de manière à pouvoir modifier le conteneur parent sans avoir à modifier également l'élément enfant fixe - élégant et flexible

ps: personnellement je pense que ce n'est pas grave du tout que IE6 / 7 n'utilise pas inherit

la position fixe est un peu délicate (voire impossible), mais la position: sticky fait très bien l'affaire:

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>

body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

voir l'exemple codepen

Vous pouvez également le résoudre par jQuery:

var new_width = $('#container').width();
$('#fixed').width(new_width); 

Cela m'a été très utile car ma mise en page était réactive et la inheritsolution ne fonctionnait pas avec moi!

Utilisez ce CSS:

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

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

L'élément #fixed héritera de la largeur de son parent, donc il en sera à 100%.

Le positionnement fixe est censé définir tout ce qui concerne la fenêtre, donc position:fixedva toujours le faire. Essayez position:relativeplutôt d' utiliser sur le div enfant. (Je me rends compte que vous pourriez avoir besoin du positionnement fixe pour d'autres raisons, mais si c'est le cas - vous ne pouvez pas vraiment faire correspondre la largeur à son parent sans JS sans inherit)

Voici un petit hack que nous avons rencontré lors de la résolution de certains problèmes de rafraîchissement sur une grande application.

Utiliser -webkit-transform: translateZ(0);sur le parent. Bien sûr, cela est spécifique à Chrome.

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

Il existe une solution simple pour cela.

J'ai utilisé une position fixe pour le div parent et une largeur maximale pour le contenu.

Vous n'avez pas besoin de trop penser aux autres conteneurs car la position est fixe uniquement par rapport à la fenêtre du navigateur.

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

Cette solution répond aux critères suivants

1. La largeur en pourcentage est autorisée sur le parent
2. Fonctionne après le redimensionnement de la fenêtre
3. Le contenu sous l'en-tête n'est jamais inaccessible

Pour autant que je sache, ce critère ne peut pas être rempli sans Javascript (malheureusement).

Cette solution utilise jQuery, mais pourrait également être facilement convertie en JS vanilla:

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();

#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

Vous devez donner le même style à l'élément fixe et à son élément parent. L'un de ces exemples est créé avec des largeurs maximales et dans l'autre avec des rembourrages.

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}

<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>