Can't get footer to stick to bottom of page

[billymac]

Could someone please have a look at the following home page using chrome dev tools (or whatever…) and see if you can figure out why the footer won’t stick to the bottom of the page.
It seems to be fine if there is enough content to push it down- full screen home page but not with pages like the second link

http://sarvac.ca
http://sarvac.ca/funding

I had this working and overwrote my changes by accident and now cant seem to fix it.
I did all the recommended things as far as I know like setting body to 100%, etc

It could be something in the DotNetNuke styles messing it up.

Thanks

[__]

Can’t get footer to stick to bottom of page

What you want is a commonly called a “sticky footer.”

If you try (or are already trying) one of these methods, let us know which, and which part you are having trouble with.

I had this working and overwrote my changes by accident and now cant seem to fix it.

You should be making backups, especially before you start making changes. You should always be able to “revert” to the last two or three “known good” states. A VCS (like git) is best, but at the very least, copy the project to another directory.

[billymac]

I normally do all my dev using Team Foundation Server but this time I was changing it in a different place and didnt have a backup

[__]

I normally do all my dev using Team Foundation Server but this time I was changing it in a different place and didnt have a backup

Murphy’s Law.

[PeelingPotatoes]

This worked in the dev console

$("#footer").css("position","absolute");
$("#footer").css("bottom","0");

I’ll add that if you don’t want content to show through the footer, add a background color

$("#footer").css("backgroundColor","#fff");

[jparkerweb]

To get it to truly “stick” to the bottom of the page you will need to set its position to fixed. try something like this:


#footer {
position: fixed;
bottom: 0;
width: 100%;
background: #FFF;
}

[Author]

Posts