I have a page made up of the following divs:
Header: position fixed, 80 px high
Footer: position fixed, 50 px high
Left Hand menu: position absolute
Content: position absolute.
Everything, except the content, should be fixed on the page. Only the content scrolls.
All works OK in Firefox, but I had no vertical scrollbar in IE. I read in a thread here that a “height” selector is needed to generate the scrollbar, so I put one in at 100 %, and sure enough, I get my scroll bar.
But . . . FF now has the scrollbar finishing above the footer instead of at the footer, and some of the text remains hidden under the footer. With IE, the header has extended down by about 20 px, some of the text is now in this area, and there are the same problems with the scrollbar position and text hidden under the footer.
I didn’t really expect putting “height: 100%” in the content div to solve eveything. I’ve tried various %s, but no solution. How can I properly define the height of the content div? Are there workarounds for these differences in IE?
There is also a problem with IE losing text on the right hand edge of the page, and the “new” menu is not at the edge of the page, but I’ll look at these separately later, unless anyone has any ideas?
Thanks