Div Fluid Height question

[jimbojam11]

I'm having a really hard time figuring out how to do this, if anyone can offer some advice it would really be appreciated.

Basically I'm trying to create a web page with 3 rows:

Top Row: 25 pixel fixed div

Bottom Row: 125 pixel fixed div that's attached to the bottom of the page

Middle Row: I want this to scroll with the height of the web browser with overflow: auto for it's contents. So basically I want it's height to be 100% minus 150 pixels. I don't think there's a way to make the height: 100% - 150px; is there?

Any idea on how I make this all fit together cleanly?

thanks for any help,

Jim

[drhowarddrfine]

I don't think there's a way to make the height: 100% - 150px; is there?

Nope.

I've answered this three times on this board and keep telling myself to make an article about it but I then forget. I'll have to look up my page where I do that but it might take a while.

In any case, what you do is create your header and footer as normal. The div that would be in the middle is then contained in a new "wrapper" div. This wrapper div is set to 'height:100%". Make sure you set "html,body{height:100%}"

This will push the footer down beyond the bottom of the page, so to bring it back into view, give it a negative top margin equal to the height of footer.

Now that's from memory only. I hope details aren't important :)