Problems with CSS sticky footer

The fantastic CSS Tricks website has, in their Snippets area a snippet for a Sticky Footer

http://css-tricks.com/snippets/css/sticky-footer/

or using jQuery

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

latest link with demo


Apparently you need to change your rules for the #footer to include a defined height, and then a negative margin-top rule with a value equal to your defined height.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/


I wrote a very clean CSS footer a couple days ago, you could find it useful.

http://mystrd.at/modern-clean-css-sticky-footer


Modern Clean CSS “Sticky Footer” from James Dean

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Demo here

Tags:

Html

Css

Xhtml

Recent Posts