CSS question

General Questions
#1

Okay, so I’m making a webpage with CSS. I want the page to have 3 DIVs. The top and the bottom DIVs are narrow bands that will line the top and bottom of the page. The full page will not scroll, so these are basically fixed bands at the top and bottom. The DIV between them will house the page’s content, and will stretch to fit the room on the page that isn’t taken up by the upper and lower bands. Any extra space required by the content in the center DIV will be accessible from a scroll bar that only scrolls the center DIV.

Since each monitor is different, I can’t give this center DIV a fixed height. How do I get it to stretch according to how much room is available for it on the screen? I can’t figure this out. Thanks for any help!

#2

I assume the top and bottom bands have fixed heights (whether they are in percent or pixels), correct?

Your center DIV needs (insert the height of your bands where I have put 0):



#centerDiv {
top:0px;
bottom:0px;
position:absolute;
overflow:scroll;
}

The top and bottom attributes make sure the center div doesn’t start before the top value, but that it ends before the bottom value. It will stretch for the entirety between the two values The absolute attribute makes sure it takes that position, and the overflow attribute just makes sure it scrolls.