Geek asks and answers

CSS Sticky Footer - With Margin

I am trying to apply this Sticky Footer method: http://code.google.com/p/cleanstickyfooter/

It works great, however, I have one problem. For my site, the site has a 34x margin at the top of the page. Therefore, I tried several ways to implement it, by executing body {margin-top:34px}or executing container {margin-top:34px}.

However, in both cases the Sticky Footer is messed up. When I try to compensate for 34px, it will never work.

Any ideas?

Here is an example script: http://jsfiddle.net/jrZKb/

+5
source share
1 answer

Using Modern Stylish CSS Sticky Footer , it works (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;
}
+5
source

More articles:


All Articles