independently scrolling sections in JSP page, and IE
posted 3 years ago
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.
page in Chrome, displayed correctly; middle section will scroll with top and bottom sections fixed
page in IE 9; note whole window now has scroll and middle section doesn't
same page in IE 9, scrolled down; bottom section has moved and is still hiding text in middle section