All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

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)


    height: 100%;

    height: 100%;

    position: relative;
    min-height: 100%;

    * html #nonFooter
    height: 100%;

    padding-bottom: 9em;

    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?

    # December 27, 2011 at 3:44 am

    This reply has been reported for inappropriate content.


    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:

    # March 22, 2013 at 3:07 pm

    Hi, It seems to work for me :

    position: absolute;
    height: 80px;
    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed