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:

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 :D

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.

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!