CSS to get footer to stay at the bottom of the page

[mcco]

Hello,

I have been trying to figure this out and I can't seem to do it. I have coded a forum and I want to be able to get the footer to adjust to the content of the page and stay at the bottom. Right now I have the height set to a certain px which leaves a large space between the content and the footer if there is less content on the page.

I have tried setting the min-height and height to 100% but that seems to be ignored by the footer css. After I did that I set the position to absolute and the bottom to 0 but the footer ignores the height and is either in the middle of the page or up by the header. It seems like the only way the footer css is applied is when the content height is a set px.

This is starting to get really frusterating as my static pages work fine but pages that have to adjust based on the content have big blank space incase the content that is added is large. Any help would be very much appreciated as this is the main thing I have to fix to have my forum looking the way I want it to.

Here is the website I am talking about if you want to check out my issue: http://www.realitytvaddict.com

If you click on a thread to read a post then you will be able to scroll down and see what I am talking about.

[ZABI]

try

position: absolute;
bottom: 0;

[mcco]

try

position: absolute;
bottom: 0;

I did that and it did not work. I stated that in my original post.

[cbVision]

try

position: absolute;
bottom: 0;

Wow, did you even read his post?

What you're looking for is a "sticky footer." If you Google that, you can find examples. Here's one I've used:
http://ryanfait.com/sticky-footer/

[jadhav.soma]

The code is here.....


<style type="text/css">
html, body {
height: 100%;
}

div.header, div.foo { display:block; text-align: center; }

div.header { height:30px; background-color:#f5f5f5 }

.navbar-fixed {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
}

.content {
position: relative;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
}
div.container{
padding:20px 0px 50px 0px;
}

div.foo {
height: 50px;
position: relative;
background-color:#dddddd;
}

</style>

<div class="header navbar navbar-fixed">
This is the Header
</div>
<div class="content">
<div class="container">
<p>see the forest for the trees.</p>

</div>
</div>
<div style="clear:both;"></div>
<div class="foo">
This is the footer, which will stay at the bottom!
</div>

[mcco]

Thanks for the post but I have tried using that exact code but for some reason it is still not keeping the footer down. I figured it would work if it was working for other people. That is why I am so confused.

[mcco]

Someone please help as I am getting to the point of pulling out my hair!!

I have tried every script I could find about a sticky footer but because my content is being created dynamically the height of the page varies significantly from page to page. For some reason setting height to auto or 100% doesnt work it places the footer in the middle of the page. If I take the height property out completely the footer is placed at the top of the page mixed in with the header. The only way the footer goes to the bottom of the page is if I put in a specific height in px.

Please someone help me out!!!!

Thank you