web-dev-qa-db-fra.com

Largeur du fluide en position fixe

Imaginer:

<div class="outer">
    <div class="inner">
    </div>
</div>

Où:

  • .outer fait partie d'une structure de colonne et sa largeur est un centile, donc fluide.
  • .inner représente un élément de position fixed qui doit remplir avec une largeur de 100% l'élément .outer. Cependant, sa position verticale reste la même, donc fixed.

J'ai essayé d'implémenter cette mise en page avec les CSS suivants:

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: 100%;
}

Cependant, .inner ne calcule pas sa largeur sous la forme d'un pourcentage de son parent relative. Au lieu de cela, il remplit toute la largeur de la fenêtre/du document. Si vous tentez une propriété left ou right, les mêmes qualités sont ignorées par les parents.

Y a-t-il un moyen de contourner cela?

csscss-positionfluid-layout
17
escproxy
.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: inherit;
}

Cela devrait faire l'affaire.

6
D-Jones

position: fixed est toujours relatif à la fenêtre/au navigateur, il ne peut donc pas être utilisé pour résoudre votre problème. Le positionnement fixe supprime l'élément de l'ordre naturel du DOM, et ne reste donc plus dans votre div externe, d'où la largeur totale du navigateur et non de votre conteneur. Ce que vous devez utiliser est position: absolute pour placer .inner par rapport à .outer. Vous pourrez positionner votre élément et avoir sa largeur contenue dans le .outer div.

4
Kyle Shevlin

Utilisez ceci :

.inner {position: fixe; gauche: 0; à droite: 0;

}

3
user3902035

Les éléments fixes ne prennent que des valeurs absolues en largeur. Si votre conteneur parent est fluide (la largeur est un pourcentage), vous devez définir la largeur de l'élément fixe de manière dynamique. Vous devez connaître la largeur du conteneur d'emballage et le définir sur l'élément collant.

CSS

.outer {width: 25%;}
.inner {position: fixed;}

JS

var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);

En outre, vous pouvez ajouter un écouteur d'événements si la fenêtre de la casse est redimensionnée.

JS

window.addEventListener('resize', resize);
function resize() {
    var fixedWidth = $('.outer').css('width');
    $('.inner').css('width', fixedWidth);
}
1
Ria Carmin

Qu'en est-il d'utiliser quelque chose comme ceci violon ?

.outer {
    width: 20%;
    height: 1200px;
    margin-left: 5%;
    float: left;
}
.inner {
    height: 200px;
    position: fixed;
    top: 0;
    background: orange;
    right: 75%;
    left: 5%;
}
0
Saad Shahd

position:fixed est toujours relatif à la fenêtre de visualisation/navigateur, pas aux ancêtres.

0
AndreiD

Vous pouvez jeter un oeil à ceci jsfiddle que j’ai fait pour illustrer le correctif de votre problème, vous pouvez utiliser ce code exactement comme il fait ce que vous voulez.

0
Ilan Biala