Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can't get footer to stick to bottom of page

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #182863
    billymac
    Participant

    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

    #182865
    __
    Participant

    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.

    #182869
    billymac
    Participant

    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

    #182870
    __
    Participant

    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.

    #182925
    PeelingPotatoes
    Participant

    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");

    #183177
    jparkerweb
    Participant

    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;
    }

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.