Menu
Hi,
I’m trying to design a page that mimics table behavior with CSS (same old story). My users want a page that fills 100% vertically and horizontally. They want a fixed area at the top for navigation and other things and a fixed area at the bottom for various site information. That leaves a variable sized area in the center for content. I’ll be turning autoscrolling off for the page and only setting it on for the center content section.
I’ve already accomplished this using a table, but now I’m trying to do it with CSS. I can set up the fixed areas at the top and bottom of the screen easy enough, but I can not figure out how to get the center section to take up the remaining screen height. I’ve included a sample page below. It has color borders set in it just so that I can see the area each <DIV> tag is occupying. This is for an Intranet, so I’m looking for an IE solution, although cross-browser would be great.
Thanks for your help!
[code]
<HTML>
<HEAD>
<TITLE>CSS Tables</TITLE>
</HEAD>
<BODY style=”height: 100%; margin: 0; padding: 0;”>
<DIV style=”border: thin solid red; height: 100%; width: 100%;”>
<DIV style=”border: thin solid blue; height: 100px; width: 100%;”>
This would be top navigation.
</DIV>
<DIV style=”border: thin solid orange; bottom: 0; height: 100px; position: absolute; width: 100%;”>
This would be various site information.
</DIV>
<DIV style=”border: thin solid green; height: auto; width: 100%;”>
<DIV style=”height: 100%; width: 100%;”>
Content goes here.
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>