CSS to get footer to stay at the bottom of the page
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.
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
padding:20px 0px 50px 0px;
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.
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.