Grow your CSS skills. Land your dream job.

How do we make footers stick on the bottom these days…

  • # December 27, 2011 at 3:00 am

    I have never had to make a page that required the footer always sticking to the bottom of the page with small amounts of content. I am Googling way to do this but most are outdated and dont seem to be working to well..

    Original Posting (footerStickAlt method)
    HTML









    CSS

    html
    {
    height: 100%;
    }

    body
    {
    height: 100%;
    }

    #nonFooter
    {
    position: relative;
    min-height: 100%;
    }

    * html #nonFooter
    {
    height: 100%;
    }

    #content
    {
    padding-bottom: 9em;
    }

    #footer
    {
    position: relative;
    margin-top: -7.5em;
    }

    So what im guessing is that they want to force the footer outside of the actual container and than just pull it back in with negative amounts..

    All i want to do is have my footer image always on the bottom of the page. Any updated or better ways to achieve this?
    -Thanks

    # December 27, 2011 at 3:44 am

    Try

    footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px; /* choose any height */
    }
    # December 27, 2011 at 7:27 am

    stay away from fixed unless you want that behavior.
    Use this:

    http://www.cssstickyfooter.com/

    # March 22, 2013 at 3:07 pm

    Hi, It seems to work for me :


    footer{
    width:100%;
    position: absolute;
    height: 80px;
    clear:both;
    top:100%;
    }
    # March 22, 2013 at 3:09 pm

    Holy ham-sammich, this is an old post that i thought marked solved. @LukyVj, thanks for the reply though :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".