• Post Reply Bookmark Topic Watch Topic
  • New Topic

independently scrolling sections in JSP page, and IE  RSS feed

Bob Grossman
Ranch Hand
Posts: 78
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Not sure this is the best forum for this question, but here goes. I have a JSP page that is divided into three sections; I want the sections to scroll independently, keeping the top and bottom sections in fixed positions when the middle section scrolls. I found some code on the Web that used CSS to do this, and it included workarounds for Internet Explorer. The code works beautifully for all browsers except Explorer. Looking at the attachments, the first shot shows the desired page in Chrome. Notice the scroll bar on the middle section; when I scroll it, the top and bottom sections remain properly fixed. The second two screen shots show the same page opened in Internet Explorer 9. Notice the scroll bar of the middle section has now become a whole-window scroll bar, so that the bottom section scrolls up and continues to cover the middle section when I try to scroll down in the middle section.

Here's the CSS defining my three sections:

In the examples, the values of headerHeight and footerHeight are 80 and 135.

I've tried inserting overflow:hidden; lines in various places, but no joy. Any insight into what I could do better would be most appreciated.
[Thumbnail for chromSnapshot.PNG]
page in Chrome, displayed correctly; middle section will scroll with top and bottom sections fixed
[Thumbnail for ieSnapShot1.PNG]
page in IE 9; note whole window now has scroll and middle section doesn't
[Thumbnail for ieSnapShot2.PNG]
same page in IE 9, scrolled down; bottom section has moved and is still hiding text in middle section
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!