Fluide largeur de position fixe
Imaginer:
<div class="outer">
<div class="inner">
</div>
</div>
Où:
.outer
est une partie d'une colonne de la structure, et sa largeur est d'un rang centile et donc fluide..inner
représente unfixed
position de l'élément qui doit remplir avec 100% de la largeur de la.outer
élément. Cependant, sa position à la verticale reste le même, doncfixed
.
J'ai essayé de mettre en œuvre cette mise en page avec les CSS suivant:
.outer {
position: relative;
width: %;
}
.inner {
position: fixed;
width: 100%;
}
Cependant, .inner
ne pas calculer sa largeur en pourcentage de son relative
parent. Au lieu de cela, il remplit toute la largeur de la fenêtre de document. D'essayer quelque left
ou right
résultat des propriétés dans le même parent-ignorant qualités.
Est-il un moyen de contourner cela?
- position: fixed est toujours et toujours "proche" de la fenêtre du navigateur/vue sur le port et jamais "relative" à un positionnement absolu ou relatif) parent/ancêtre.
- "Est-il un moyen de contourner cela?"
- stackoverflow.com/questions/7846161/...
- stackoverflow.com/questions/6976048/...
- stackoverflow.com/questions/5873565/...
- stackoverflow.com/questions/6794000/...
- stackoverflow.com/questions/11431358/...
- position: absolute
- La troisième solution de @Jawad est réellement génial !
- J'ai aussi utilisé @Jawad 3ème réponse ( stackoverflow.com/questions/5873565/... )
- juste parce que vous voulez un élément pour avoir une non modification de la hauteur / la position verticale signifie que l'élément doit être marqué comme résolu. le violon fournis par @Ilan Biala démontre clairement un exemple de travail
Vous devez vous connecter pour publier un commentaire.
Cela devrait faire l'affaire.
inherit
propriété est hériter la largeur définie par son plus proche parent.position: fixed
est toujours par rapport à la fenêtre de navigateur, il ne peut donc pas être utilisé pour résoudre votre problème. Correction du positionnement supprime l'élément de l'ordre naturel des DOM, et donc de ne pas rester à l'intérieur de votre div extérieure plus, donc pourquoi il prend toute la largeur du navigateur et non pas de votre conteneur. Ce que vous devez utiliser estposition: absolute
à la place.inner
par rapport à.outer
. Vous serez en mesure de positionner votre élément ainsi que sa largeur d'être contenue par le.outer
div.Utiliser ceci :
.intérieure {
position: fixed;
left:0;
droit:0;
}
Éléments fixes de prendre uniquement les valeurs absolues de largeur. Si votre conteneur parent est fluide (largeur est un pourcentage), vous devez définir la largeur de l'élément fixe de façon dynamique. Vous avez besoin pour obtenir la largeur de l'emballage récipient et le mettre sur le collant élément.
CSS
JS
En outre, vous pouvez ajouter un écouteur d'événement dans le cas où la fenêtre est redimensionnée.
JS
Vous pouvez prendre un coup d'oeil à ce jsfiddle que j'ai fait qui illustre le correctif pour votre problème, vous pouvez utiliser ce code exactement comme il le fait ce que vous voulez.
position:fixed;
. C'est lié à son problème et ma réponse propose une solution.position:fixed
est toujours par rapport à la fenêtre/fenêtre de navigateur, pas d'ancêtres.transform
est appliquée dans les navigateurs modernes...Qu'en utilisant quelque chose comme ceci violon ?