By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Div Fluid Height question

P: 1
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
Jan 16 '08 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
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 :)
Jan 16 '08 #2

Post your reply

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