I have a fixed header and footer div height that are in pixels, but I would like the content div to expand in between them both so that the header is always at the top and the footer always at the bottom of the browser window while maintaining 100% overall height. I don't want the content div to collapse by using 'Auto', I want it to be the full height between the header and footer div. Here's my code: html, body { margin: 0; height: 100%; } #header { height: 90px; background-color: blue; } #content { height: 100%; background-color: red; } #footer { height: 50px; background-color: green; } ----------------- <body> <div id='header'> </div> <div id='content'> </div> <div id='footer'> </div> </body> Code (markup): How do I accomplish this?
I may be mis-understanding, but it looks to me like your code is doing exactly what you want it to. The Header is on the top, the footer is on the bottom, and the content container expands. I copied and pasted your code, and it seems to be doing exactly that.
You mean you want content to expand to fill the browser window (except for the header and footer, of course)? If that is so, there's no css-only solution, but you will have to rely on javascript to read the size of the browser window, calculate the height that content should be and then change it.
It expands larger than the page though. The overall height should be 100% to the browser window and if the content div is larger it should show a scrollbar.
Here's what I think might work... Inside of the body element, just have a single lone element (wrapper). Set that height to 100%. Then just put the header inside, footer inside, fixed or absolute position both of those and set margins on the inner elements inside of the wrapper to the height of footer and header. Or am I totally not getting it? Heh
Gotcha. The reason it expands higher than the page is because your container is 100% tall, and then your header and footer are fixed height, AND outside your container. You will notice that if you make your container about 75% tall, it won't expand too far, and you won't have a scroll bar. However, this is not how I would recommend fixing it. I would put the header and footer INSIDE the container, and absolutely position them to be at the top and the bottom of the container. Then I would put a content container in between the header and footer and give it margins so that it won't overlap the header and footer. EDIT: Dang! SoulScratch beat me to it!
Perhaps you want something like this? http://www.soulscratch.com/playground/css/header-footer-fixed.html
The images below show you exactly what I need. The script was designed using mostly tables (98% tables), but there are "issues" as you can tell in the images. IE displays the script PERFECTLY whereas FF has "issues". So I'm wanting to design the entire thing in CSS if possible so that it works in both IE and FF browsers, since CSS is "suppose" to be better, but right now CSS seems to be a big pain in the ass and I'm not sure if I can achieve what I want with CSS. I had a couple of other programmers give up on the script because of the CSS issues, and I would like to know if this is possible with CSS. Click on the images for a 100% actual size image. The red and blue bar below the header and the side bar beside the "iframe" is collapsable.
Updated to fix IE. Edit: damn, gets harder and harder. I guess gecko got something wrong, as Opera 9 and Safari 3 are both showing the extra div at the bottom. But it does work fine in FF2/IE6.
Your example in IE shows the scrollbar go under the header and footer and in FF it goes under the footer. It should instead fit between the header and footer. You could achieve this by specifying a top and bottom margin for the content div, but that's where you then run into a problem because the red and blue bar below the header are collapsable so you can't have a fixed top margin otherwise it wouldn't look right. There should be an extra option for height in CSS like: #content { height: fill; } This would then automatically fill the space between two divs without specifying a digital or percentage for height.
CSS does some wonderfully complicated layouts, but there are a few things it really sucks at. Vertical alignment is one. 100% height layouts is another. Deathshadow did a nice 100% height with headers and footers... for stone mountian bulldogs or something, here on the forum. I've been using it so far for two sites, very nice. I think he uses the footer trick invented by Paul O'Brien (set height on footer, negative top margin that equals it). However, he'd probably be the first to say that if CSS makes more code simply for 100% height layout, use tables. 100% in tables, unlike in CSS, means 100% plus increasing with content. You should search about the forums and see some ideas. You could also try out Site Point forums and they've got some FAQs over stuff like 100% height or flex-width etc in the stickies. You don't have to give up on CSS but seriously, if you're using a table as simply an outer frame and don't do all the mistakes with nested tables or using a whole table for one stupid image etc, it's not so bad. There are ways to make table layouts work best for the screen-reader crowd as well. You can also mix tables and divs, still have proper semantic markup, and use CSS for all the rest of the presentational stuff. Don't give up so soon.
I believe what he wants is beyond what deathshadow/Paul O'Brien posted (100% height + negative margins on wrapper) since he wants the scrollbars only in the content area thats 100% except for header/footer. I still haven't been able to get it to work (the bottom part at least on my local copy). /me waits for inimino's post
This is very simple to do with CSS: http://mjclement.com/tests/2008/dp_guy/01.html I've been told IE6 fails to render the above layout correctly so your problem is not with CSS but with Internet Explorer. There may be some obsolete browser specialists around who can suggest a workaround for that particular browser, or you be in a position to encourage your users to upgrade to something that supports basic CSS.
Took your working page and added some styles to fix up IE7 and IE6. http://www.soulscratch.com/playground/css/header-footer-fixed2.html
Ya, I've spent 2 days so far looking for a solution. I think I may have come to a solution that might work and if it doesn't, I'm just going to have to settle for something else. Thanks for the example. I'm going to see if I can work something out of it. The only other solution is to use javascript to determine the height for the content div. Your example still has an issue with FF with the scrollbar going under the footer although it works fine in IE. I'm going to play around with inimino's example and see if I can figure something out.
Another possible idea, though I hate them: seperate frame for the body. Frames are not accessible design, but they do have their own scroll bars (rather like overflow: auto or overflow: scroll makes). It's an idea, albeit a last-resort one.
Bleh, frames. I don't want to go back to those days. I understand it would be a last resort, but tables actually work PERFECTLY right now, only in IE though (FF messes everything up). I could just tell my customers to use IE. I have another programmer right now trying to figure it out, so I'll see if he can accomplish what I need.
It's easier to tell customers NOT to use IE. Unless you can guarantee that every visitor has Windows... I have Linux and I really need to screw with stuff to see stuff in this fake IE6 I've got. Mac users are in the same boat. IE users can almost always download FireFox or Opera, but non-Windows users are not allowed to use IE. I recently found out that a partner business with my company's had indeed such a site-- built in something called Publisher and used this Vector Markup Language thing which was M$ specific. With a non-IE browser, all you saw was a thin strip of off-centered text, unclickable (there was a menu) and the page was really really long (but empty, just white). I rewrote it for them to work in all browsers just because I don't want such a restrictive link to a broken site on my company's page... like, here's a company we recommend to our customers... oooh and it looks nasty and unprofessional, but that's okay, we're sure they do their actualy work much better! Bah. : )