470,563 Members | 2,127 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,563 developers. It's quick & easy.

Div Fluid Height question

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,

Jan 16 '08 #1
1 3261
7,435 Expert 4TB
I don't think there's a way to make the height: 100% - 150px; is there?

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 :)
Jan 16 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Alberto Santini | last post: by
5 posts views Thread by Alex Bell | last post: by
2 posts views Thread by David Winter | last post: by
22 posts views Thread by Jam Pa | last post: by
2 posts views Thread by Basso | last post: by
12 posts views Thread by JB | last post: by
6 posts views Thread by hiazle | last post: by
7 posts views Thread by Nik Coughlin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.