div avec position fixe

Question

J'ai un div avec la position de style: fixe et je veux qu'il défile vers le bas de la page, mais je ne veux pas que la div se déverse dans le pied de page. Comment pourrais-je accomplir cela?

merci à l'avance, shawn

Answer 1

essayer.

CSS

body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/ 
.mainBody {height:90%;overflow:auto;} 

HTML

<div style="border:1px solid black;">TOP</div> 
    <div class="mainBody"> 
     <div style="height:800px;"></div> <!-- To for scroll --> 
     HERE IS Main Body 
    </div> 

Ce transférera les barres de défilement de la fenêtre, à la div qui montre votre contenu. Le div TOP restera à l'endroit où vous le voulez, donc vous pouvez le positionner ou le laisser tel quel, et ne jamais entrer en collision avec votre pied de page, que vous pouvez mettre dans votre div principal.

Answer 2

J'ai déjà eu le même problème dans le passé et j'ai utilisé un événement Javascript pour détecter si l'élément position: fixed devait entrer en collision avec le pied de page. Si c'est le cas, je le change en position: absolute avec un attribut supérieur juste au-dessus du chevauchement.

Ensuite, quand ils commencent à faire défiler la page et qu'il ne chevauche plus le pied de page, je le change en position: fixe.

Aussi, si vous envisagez de faire défiler cet élément dans IE6, je recommande CSS expressions pour la position: émulation fixe.