Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

independently scrolling sections in JSP page, and IE

 
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.
chromSnapshot.PNG
page in Chrome, displayed correctly; middle section will scroll with top and bottom sections fixed
[Thumbnail for chromSnapshot.PNG]
ieSnapShot1.PNG
page in IE 9; note whole window now has scroll and middle section doesn't
[Thumbnail for ieSnapShot1.PNG]
ieSnapShot2.PNG
same page in IE 9, scrolled down; bottom section has moved and is still hiding text in middle section
[Thumbnail for ieSnapShot2.PNG]
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic