1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Height Issue

Discussion in 'CSS' started by darren132, Jan 22, 2008.

  1. #1
    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?
     
    darren132, Jan 22, 2008 IP
  2. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    ChaosFoo, Jan 22, 2008 IP
  3. rb3m

    rb3m Peon

    Messages:
    192
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    rb3m, Jan 22, 2008 IP
  4. humanedited

    humanedited Peon

    Messages:
    747
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
  5. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #5
    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.
     
    darren132, Jan 22, 2008 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    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
     
    soulscratch, Jan 22, 2008 IP
  7. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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! :)
     
    ChaosFoo, Jan 22, 2008 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    soulscratch, Jan 22, 2008 IP
  9. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #9
    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.

    [​IMG]

    [​IMG]


    The red and blue bar below the header and the side bar beside the "iframe" is collapsable.
     
    darren132, Jan 22, 2008 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #10
    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.
     
    soulscratch, Jan 22, 2008 IP
  11. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #11

    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.
     
    darren132, Jan 22, 2008 IP
  12. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #12
    I guess it's back to table layouts then. CSS is just not good enough for complicated layouts.
     
    darren132, Jan 22, 2008 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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.
     
    Stomme poes, Jan 22, 2008 IP
  14. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #14
    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
     
    soulscratch, Jan 22, 2008 IP
  15. inimino

    inimino Member

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #15
    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.
     
    inimino, Jan 22, 2008 IP
  16. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #16
    Took your working page and added some styles to fix up IE7 and IE6.

    http://www.soulscratch.com/playground/css/header-footer-fixed2.html
     
    soulscratch, Jan 22, 2008 IP
  17. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #17
    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.
     
    darren132, Jan 23, 2008 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #18
    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.
     
    Stomme poes, Jan 24, 2008 IP
  19. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #19
    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. :D

    I have another programmer right now trying to figure it out, so I'll see if he can accomplish what I need.
     
    darren132, Jan 24, 2008 IP
  20. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #20
    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. : )
     
    Stomme poes, Jan 25, 2008 IP