web-dev-qa-db-fra.com

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

J'essaie de donner à un div (position: fixed) la largeur de 100% (par rapport à son div). 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 divs prenant la largeur de 100%/inherit . Vous pouvez trouver le deuxième problème sur la mise à jour jsfiddle: http://jsfiddle.net/4bGqF/7/

Exemple 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 fixed prend toujours la largeur de la fenêtre/du document. Est-ce que quelqu'un sait comment résoudre ce problème?

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

Merci beaucoup!

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

jquerycssjquery-plugins
99
Dnns

Je ne suis pas sûr de savoir quel est le second problème (basé sur votre modification), mais si vous appliquez width:inherit à tous les divs internes, cela fonctionne: http://jsfiddle.net/4bGqF/9/

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

97
jeroen

Comme de nombreuses personnes l’ont déjà fait remarquer, la conception réactive définit très souvent la largeur de%

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

Mais, je pense, presque aussi souvent que le design réactif définit max-width aussi, 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 de faire en sorte qu'un menu collant soit restreint à la largeur du parent d'origine à chaque fois qu'il se bloquait.

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

Cela fonctionne avec mon thème déjà sensible de manière à ce que je puisse modifier le conteneur parent sans avoir à modifier également l'élément enfant fixe - élégant et flexible

ps: Je pense personnellement que peu importe que IE6/7 n’utilise pas inherit

17
aequalsb

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, il en sera donc à 100%.

12
banrobert

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 sensible et la solution inherit ne fonctionnait pas avec moi!

10
user3173364

Le positionnement fixe est censé tout définir par rapport à la fenêtre d'affichage, donc position:fixed le fera toujours. Essayez plutôt d'utiliser position:relative sur la div de l'enfant. (Je réalise que vous aurez peut-être 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

6
Thomas Shields

Voici le truc que j'ai utilisé.

Par exemple. J'ai eu ce code HTML:

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

et pour que #fx soit corrigé dans .head, la solution de contournement consiste à ajouter une div supplémentaire en tant que conteneur pour #fx avec position: absolute de la manière suivante:

<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 : pour ne pas définir top et left pour #fx, définissez ces attributs sur .area_for_fix.

1
Evgeniy

Voici un petit bidouillage que nous avons rencontré lors de la résolution de certains problèmes de retrait sur une application volumineuse.

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

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

-webkit-transform: translateZ(0);
1
Senica Gonzalez

position fixe est un peu délicat (voire impossible), mais position: collant fait le tour magnifiquement:

<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'échantillon codepen

0
Multicam

Cette solution répond aux critères suivants

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

Autant que je sache, ces critères ne peuvent pas être satisfaits sans Javascript (malheureusement).

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

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
Skeets

Il existe une solution facile pour cela.

J'ai utilisé une position fixe pour parent div et une max-width pour le contenu.

Vous n'avez pas besoin de trop penser aux autres conteneurs, car la position fixe est uniquement relative à 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>

0
Sab Devadasan