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


137

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.


voir ma réponse ci-dessous qui offre des informations supplémentaires sur inheritet comment utiliser max-width:inheritavec width:inheritconserve le même rapport conteneur / contenu tout en restant réactif et gérable
aequalsb

Réponses:


120

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


4
+1 pour une solution incroyablement simple, même si ce width: inheritn'est pas la première chose à laquelle j'aurais pensé
Bojangles

7
Quelle sorcellerie est-ce?! +1
Nicu Surdu

7
Une idée de la façon de résoudre ce problème si la largeur du #container est de 50% à l'intérieur d'un div avec une largeur = 100px (alors la largeur du conteneur serait de 50px et la largeur fixe serait de 50% de la largeur du navigateur)?
Kek

113
L'astuce consistant à hériter de la largeur du parent ne fonctionne que si le parent a une largeur définie en px.
jahu

33
C'est une très mauvaise réponse ... C'est en gros l'équivalent de la définition de valeurs constantes, ce qui n'est pas du tout très utile.
Jay

33

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


Très bonne réponse! Dans mon cas, l'ajout d'un a min-width: inheritfait l'affaire.
Bruno Monteiro

Cela fonctionne pour les éléments parents avec des largeurs définies comme px et pourcentage. Doit être la bonne réponse à mon avis.
Mikel le

24

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


11

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!


1
mauvaise réponse, si vous redimensionnez la fenêtre, cela se brise.
Jay

2
Devrait vraiment avoir un gestionnaire d'événements window.onresize.
twistedpixel

C'est la manière de faire. Pourrait être enveloppé dans une fonction setWidth (), puis l'appeler sur les écouteurs d'événements de fenêtre «load» et «resize»
woodz

Cela a bien fonctionné pour moi! J'ai rencontré un problème où le parent était width: 25%, alors faire width: inherit rendait chaque enfant width: 25%.
Troy Riemer le

10

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%.


1
sauf IE6-7 ne prend pas en charge inherit. Je ne sais pas si cela mattesr.
Thomas Shields

Merci beaucoup. Ça marche quand je l'essaye dans l'exemple mais pas dans mon code ... Bref c'est une réponse à la question que j'ai posée ici. Il y a probablement une autre raison pour laquelle cela ne fonctionne pas ... Mais quand même, merci!
Dnns

6

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)


1
@Downvoter - pouvez-vous expliquer, s'il vous plaît? Je n'ai aucun problème avec un vote négatif, mais j'aime savoir pourquoi pour pouvoir améliorer mes réponses à l'avenir.
Thomas Shields

1
Votre explication est bonne, mais vous avez dit "vous ne pouvez pas vraiment faire correspondre la largeur à son parent sans JS". Bien que cela soit possible dans certains cas (en utilisant inherit).
Dnns

Oh bien sûr. J'avais oublié d'hériter car je cible beaucoup IE et seul IE9 + le prend en charge.
Thomas Shields

1
même Microsoft veut que IE disparaisse - compte tenu de l'âge de ce message original, je pense qu'il est prudent de dire que le problème d'IE est sans objet. s'il est fortement recommandé de ne pas soutenir IE À MOINS QUE vous ne facturiez spécifiquement pour un tel support - et à l'heure!
aequalsb

3

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);

2
Cela résout le problème de largeur, mais cela rend l'enfant non fixe par rapport à la fenêtre.
Vivek Maharajh

Désolé pour le vote défavorable, car cela va complètement à l'encontre du but de la position: fixe.
trusktr

Je ne pense pas que vous ayez lu la question. Il dit, comment faire un div "relatif" à un parent avec une position "fixe". CELA TROP est une position anti-fixe. Et ma réponse dit clairement «pirater». Cela ne va pas à l'encontre de l'objectif lorsqu'il vous rapproche de votre solution.
Senica Gonzalez

1

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>


1

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>


0

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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.