I want to create a page which has a header, display area and footer. I want the header and footer to always be displayed at the top and bottom of the page, respectively. I don't want the main browser page to overflow. I want the display area between the header and footer to overflow if required. I have explored trying to do this with DIV and TABLE/TR tags but both seem to suffer from same two problems:
If, for example, I set the height percentages for 3 DIVs to 5%, 90%, and 5%;
1) The DIVs do NOT expand to fill the available screen. The display area DIV set to 90% will display only as much as required to display the content in the display area; the footer is often displayed in the middle of the page.
2) When the content overflows the display area DIV, it seems I can only get scroll bars to display if I specify height (and width) in pixels. If I attempt to use percentages, the whole page overflows and the footer is pushed down so that it cannot be seen by the user.
I would prefer to use height percentages as I would like this application to be cross-browser compatible but this does not seem to work. I could calculate the display area height using screen.height or perhaps screen.availHeight but I'm hoping I don't have to do this as this would cause other issues, e.g. how to handle resizing of the browser window by the user.
Is there a solution to this problem? Is there a way to use height percentages for what I am attempting to do?
This worked for me--the upper 5% of the page was blue, the middle 90% was yellow, and the bottom 5% was purple. It's actually a little too big for some reason, but if you just tweak the values down one or two percent in each case that should take care of it. (I tested in FireFox 18.104.22.168 and IE 6)
Go is to the fountain.
Joined: Jul 31, 2001
Thanks Joel. That works and fairly well across browsers. IE and Mozilla look exactly like I want and Opera looks reasonably good also.