Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Stretch footer to bottom of browser window

    Hello!

    I'm not looking for a Sticky Footer solution here, what I want is for the footer, the final containing div, to extend to the bottom of the browser window.

    I have a footer that works fine when there is a lot of content on the page, however when there is a page that has minimal content it leaves a 200px gap at the bottom of my page.

    I've tried a few things which do NOT work with my design including:
    Code:
    position:absolute;
    bottom:0;
    Also, changing the background body color isn't an option because it's already set to another color used behind my content

    Just to be clear, I'm not looking for a sticky footer. I was wondering if there was a way to make the footer stretch to the bottom of the page w/o using absolute positioning. Any help will be appreciated
    Last edited by dylanbaumannn; 02-07-2012 at 03:36 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Without seeing what you're trying to do, from what you're saying, your best option would be to reverse your thinking: give the body of your page the background you want to be seen in case of a lack of content, and then give your content/text body a div spanning the full width and give it the background of the page, making it seem like that is the main background (faux footer? donno what we'd call this, but I think that works). At this time, I don't know of any technique to have a div fill the remainder of space on a page without JS.

  • Users who have thanked Keleth for this post:

    dylanbaumannn (02-07-2012)

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Unfortunately that's what I was finding from my research too. I just added a wrapper around the main content and added a background-color to it, then changed the color of my body to a different color so we'd have a faux-footer like you said.

    Thanks keleth!


  •  

    Tags for this Thread

    Posting Permissions

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