Div fixe positionné à l'intérieur d'une autre div

J'ai un div position:fixed; et mon problème est que la position fixe est relativement à toute la page, j'ai besoin que la div fixe reste à l'intérieur d'autres div qui est centré dans la page avec des marges en auto. Donc quand je fais défiler la page je veux voir toujours la div dans la même position). J'utilise le plugin jquery StickyScroll mais je n'arrive pas à le faire fonctionner dans Internet Explorer.Div fixe positionné à l'intérieur d'une autre div

La solution peut être en jquery/javascript, css.

Merci

Source

2011-06-08 Sbml

la défintion de fixe est qu'il est positionné par rapport à la fenêtre du navigateur. – joakimdahlstrom

Quelle version de IE? IE6 et inférieur ne supportent pas la position: fixe, donc ça ne va pas fonctionner. La page StickyScroll le prévient: "Nous utilisons la position: style fixe sur l'élément collant, donc IE6 n'est pas supporté" –

J'ai seulement besoin de ça dans IE 8, mais ma page et les démos StickyScroll ne fonctionnent pas dans IE. – Sbml

Ensuite, vous ne voulez pas le positionnement fixe, mais le positionnement absolu.

Définissez position: absolute; sur l'élément que vous souhaitez positionner. Définissez position: relative; sur la div centrée afin qu'il devienne une couche que vous pouvez positionner des éléments à l'intérieur.

Source

2011-06-08 13:48:04 Guffa

Non, vous ne comprenez pas ma question, je veux le même comportement d'un div fixe (si je fais défiler vers le bas dans la page, je vois toujours la div), mais à l'intérieur d'un conteneur. – Sbml

@Sbml Cela semble assez contradictoire. – joakimdahlstrom

Pourquoi est contradictoire, le site a une largeur de 900px, avec des marges automatiques. J'ai un div avec des instructions, donc quand je fais défiler la page je veux voir toujours ce div. Si je mets par exemple à gauche: 300 dans mon moniteur 1280x800, dans un écran 1920x1200 le div reste en dehors des marges du site ... – Sbml

Vous n'avez certainement pas besoin de jQuery ou de JavaScript pour y parvenir. C'est ce que vous avez besoin: HTML:

<div class="outer"> 
    <div class="inner">some text here 
    </div> 
</div>

CSS:

.outer { 
    width:200px; 
    height:600px; 
    background-color:red; 
    margin:0 auto; 
} 
.inner { 
    width:50px; 
    border:1px solid white; 
    position:fixed; 
}

Jetez un oeil à ceci: http://jsfiddle.net/2mYQe/1/

Source

2011-06-08 13:57:59

Mais comment cela fonctionnerait-il si je voulais que la div interne se fixe à droite, à l'intérieur du conteneur externe rouge? –

Juste changé peu à George Le code Katsanos pourrait être utile pour certains un.

.outer { 
    width:200px; 
    height:300px; 
    background-color:red; 
    margin:0 auto; 
    overflow:auto;  
} 

.inner { 
    width:182px; 
    border:1px solid white; 
    position:absolute; 
    background-color:buttonface; 
}

échantillon à: http://jsfiddle.net/2mYQe/480/

Source

2012-07-25 06:48:01

Il y a longtemps. Trébucher à propos de la même chose. Un problème avec cette solution, cependant. Vous ne verrez pas le premier élément dans la liste, car le div interne absolu positionné est au-dessus. (changez le premier et le deuxième "nom de l'objet" dans le violon fiven) – Seb

La bonne solution est "flex". Cela fait 3 ans depuis le post original donc je vais supposer que nous pouvons ignorer le support de IE8 en faveur des navigateurs plus modernes qui supportent cette solution.

Comme beaucoup l'ont noté, chaque solution proposée rencontre des problèmes. Si le premier élément de la zone de contenu est masqué par rapport à l'en-tête absolu, ou si la zone de contenu occupe toute la hauteur du parent, le bas de la zone de contenu risque d'être tronqué sauf si l'en-tête (ex: height: calc (100% - "hauteur de l'en-tête" px) ce qui signifie que vous avez des valeurs codées en dur dans votre CSS ... pas bien, ou la barre de défilement étant placée au niveau parent immobilier.

afin d'éviter ces solutions hack utiliser la solution « flex » ci-dessous.

<div style="width: 200px; float: right; border: 1px solid black; 
    display: flex; flex-direction: column;"> 
    <div style="width: 100%;"> 
     <div style="width: 100%;"> 
      I'm a header 
     </div> 
    </div> 

    <div style="width: 100%; height: 100%; overflow:auto;"> 
     <div style="height:900px; background-color:lavender;">content area</div> 
    </div> 
</div>

Source

2017-08-23 15:52:22 spyder1329

Div fixe positionné à l'intérieur d'une autre div

Répondre

Questions connexes