Fixed position div

Question

I have a div position with the style: fixed, and I want it to scroll down the page, but I don't want the div to spill into the page footer. How could I do this?

thanks in advance, Shawn

Answer 1

Try it.

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> 

This will move the scroll bars from the window to the div showing your content. The TOP-div will remain wherever you want, so you can put it in order or leave it as it is, and never run into your footer, which you can put in your main div.

Answer 2

I had the same problem in the past, and I used the onscroll event for Javascript to determine if the position of a fixed element would collide with the footer. If so, I change it to a position: absolute with the top attribute located just above, overlapping the footer.

Then, when they start to scroll up the page and no longer overlap the footer, I change it to the position: fixed.

Also, if you plan to scroll this element in IE6, I recommend CSS expressions for the position: emulation fixed.