Results 1 to 7 of 7

Thread: Making page span full page height

  1. #1
    Join Date
    Aug 2006
    Location
    Ohio
    Posts
    266
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Making page span full page height

    Hey, I am trying to make a page span the full height of the browser window even if there is not content to make it that large. I have tried height: 100%; but that doesn't work. Any suggestions on how to do this? Thanks
    Thanks DD, you saved me countless times

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Assuming you had a page with content and a footer, you'd wrap them in a container div, and set the container and the html height to 100%. I put in different colors, so you could see that even thought the content div is short, the footer would still appear at the bottom of the page.

    So if this is in the body:
    Code:
    <body>
    <div id="container">
    <div id="content">header</div>
    <div id="footer">footer</div>
    </div>
    </body>
    The style would be:
    Code:
    <style>
    html, body {height: 100%;}
    #container {height: 100% position:relative;}
    #content  {background-color:red;}
    #footer {background-color:blue; position: absolute; bottom: 0;}
    </style>

  3. #3
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    Veronica's on the right track there. You can get fancy with JavaScript, too, if that fails to work.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  4. #4
    Join Date
    Aug 2006
    Location
    Ohio
    Posts
    266
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, got it working, but am having a few issues with getting it right on a centered layout. I'll play around with it a little more and may need some help if I can't get it. Thanks again
    Thanks DD, you saved me countless times

  5. #5
    Join Date
    Aug 2006
    Location
    Ohio
    Posts
    266
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, I actually have one more question. When the content of the page is longer than the browser window, how do I set it to move the footer down and not keep it at the bottom of the screen? Thanks in advance
    Thanks DD, you saved me countless times

  6. #6
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That gets trickier, as IE doesn't do min-height. This should work around that.

    Code:
    <html>
    <body>
    <style>
    html {height: 100%;}
    body{height: 100%;}
    #content{position: relative;min-height: 100%;}
    * html #content{height: 100%;}
    #footer{position: relative;margin-top: -2em;}
    </style>
    <div id="content">content</div>
    <div id="footer">footer</div>
    </body>
    </html>
    If you google "css footer" you'll find other options. This page http://css-discuss.incutio.com/?page=FooterInfo has some decent links.

  7. #7
    Join Date
    Aug 2006
    Location
    Ohio
    Posts
    266
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, its working now. Thanks for all the help.
    Thanks DD, you saved me countless times

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •