making a div extend the rest of the screen

Discussion in 'Web Design and Development' started by tominated, Aug 10, 2007.

  1. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #1
    I am making a layout with two bars (header and footer) and the content in the middle. I can't figure out how to get the footer to extend to fill the bottom area of the window if there is not enough content. It will be variable content, which makes it even harder to manage. any ideas? thanks in advance

    BTW: it's xhtml and css
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    CSS-wise, body will need margin: 0; along with any parent of header and footer. Otherwise it can generally only fill as much as its parent. There are some workarounds, but they can be hard to get to work in all browsers.

    If you have an example page online somewhere where it can be viewed it could be helpful.

    Edit: Nevermind, thanks jng, I misread the question being asked. My solution has no applicability here.
     
  3. rajfantastic macrumors member

    rajfantastic

    Joined:
    Jun 9, 2007
    #3
    something like this might work:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin:0;
    	padding:0
    }
    
    body, html {
    	height:100%;
    }
    
    #wrapper {
    	background-color:red;
    	height:100%;
            width:900px;
            margin:0 auto;
    }
    #header {
    	background-color:orange;
    }
    #content {
    	background-color:yellow;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">HEADER</div>
        <div id="content">CONTENT</div>
        <div id="footer">FOOTER</div>
    </div>
    </body>
    </html>
    
    notice that the footer is actually the "wrapper", giving it the illusion of filling the page.
     
  4. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #4
    He wants the bottom to extend to the bottom. That won't do it and height: 100% is sloppy.

    Tom, you need to give us an example. It really depends on your design. It's not really a question of making it 100% so much as making it look like it's 100% in height.

    You could for example do a faux column background.

    But then again you need to tell us what the page looks like.

    min-height is another also another option you could use.
     
  5. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #5

    Attached Files:

  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Not a flawless solution, but for #footercontent if you add "position:absolute; bottom:0px;" it will do what you want in some browsers. That's why it's not so flawless, but may help lead you to a full solution, depending on all your needs.
     
  7. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #7
    If you do that, don't forget then to add the following to your container.
    Code:
    #container { position: relative; } 
    
    If you don't and have content that stretches the page longer than the edge of the screen i.e. it scrolls verticallly, the footer is stuck there and when you scroll down the footer "scrolls up" and away.

    You probably have to use min-height for your content div in this case. and the above (with relative in parent) to get what you want.
     
  8. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #8
    wow... my brain hurts. I don't want the footer to scroll up like jng said would happen. The content strip is not a variable height. it is always the same. I want the footer to start after the cotent strip and if there isn't enough content there, stretch it down to the bottom of the users browser window (can't use min-height, because i don't have a clue what height the users window size is) and if the content (in the footer) is too long to fit in that small space, it lets you scroll the whole page. is that any better
     
  9. rajfantastic macrumors member

    rajfantastic

    Joined:
    Jun 9, 2007
    #9
    why can't you just make the body background-color the same color as your footer?
     
  10. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #10
    the problem is that the footer is a gradient.
     
  11. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #11
    Not only is it a gradient (mentioned above) but also there's stuff in it, "content" + "friends."

    It won't scroll up if you add position:relative to your container.

    You don't need to know the user's resolution for min-height. What height is it supposed to be? Just guess a bit higher, for example:

    Code:
    #content {
    min-height: 500px;
    overflow: auto;
    }
    
     
  12. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #12
    it doesn't actually do anything. I need the users resolution so i can make the footer container's min-height the space left under the content div (which is fixed in height). this sound any different to what I have previously said?
     
  13. rajfantastic macrumors member

    rajfantastic

    Joined:
    Jun 9, 2007
    #13
    sooo take the last/darkest color of the gradient and make it the background-color? it shouldnt be any more complicated than that.
     
  14. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #14
    actually, that isn't a bad idea. i'll just set the min-height for the footer as high as the background image!

    EDIT: awesome! problem solved!
     
  15. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #15
    that makes your footer bloated.
     
  16. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #16
    no it doesn't, the gradient is only about 74 to 100 px high
     
  17. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #17
    If you're making your background color the same as the darkest color of your gradiented footer and your footer ends before the bottom edge of my browser window, then I believe, yes it would look bloated - because of the background, not a min-height issue.

    But maybe we're thinking two different concepts.
     

Share This Page