Search code examples
csssticky-footer

CSS Sticky Footer - With Margin


I'm trying to apply this method of the Sticky Footer: http://code.google.com/p/cleanstickyfooter/

It works great, however, I have one problem. The design for my particular site has a 34px margin at the top of the page. So I've tried a few ways of implementing it, either by doing body {margin-top:34px} or doing container {margin-top:34px}.

However, in both cases, the Sticky Footer gets messed up. When I try to compensate for the 34px, it doesn't ever seem to work out.

Any ideas?

Here's a Fiddle example: http://jsfiddle.net/jrZKb/


Solution

  • Using the Modern Clean CSS Sticky Footer, it's working (on FireFox and IE9):

    http://jsfiddle.net/jrZKb/1/

    <body>
        <header> Header</header>
        <article>Lorem ipsum...</article>
        <footer></footer>
    </body>
    
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px; /* bottom = footer height */
    }
    header
    {
        background-color: green;
    }
    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background-color: blue;
    }