CSS Footer at bottom of page

Question

I want a footer to stay at the bottom of the page. So I created a DIV with min-heigt:100% and a DIV with no height setting for animating an ajax content loads:

HTML:

<div class="main">
    <div class="header navi>…</div>
    <div class="animater">
        <!-- content goes here -->
        <div class="footer">
            <!-- footer stuff goes here -->
        </div>
    </div>
</div>

CSS:

.main {
    min-height:100%;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
.header {
    // height, width, margin, position
}
.animater {
    // empty
}
.footer {
    bottom:0px;
    position:absolute;
}

When I load the page and the content is much smaller than my screen everything works perfect. The Footer is at the bottom of the screen as supposed.

I'm now animating the animater using CSS keyframes. When the out animation ends, I'm replacing the content of animater and enimate it back in again. When the content is smaller then the screen again, the footer is at the top of my animater. But when I'm reloading the page "manually" (so that the content does not get animated), the footer is positioned properly.

So I need a footer that sits at the bottom of the content whatever height the content has. I cannot give the animater min-height 'cause it is not at the top of the page.

Tried something like CssStickyFooter yet? PS. Helps to know what browsers you need/want to support. — Jeroen
When you animate the keyframe, is it defaulting back to a position:relative again? If you set it again at the end of the keyframe, does it help? — captbrogers
Nope. Setting it to relative makes the footer to stick to the bottom of the animater. But the animater does not got to the bottom of The page. I'd like to support most major browsers like Safari, FF and if possible also IE10+ — Julian F. Weinert

X-27 is done with the network X-27 is done with the network · Accepted Answer · 2013-01-21T15:34:02

This example I made shows the minimum css needed to get a footer to stay down. http://jsfiddle.net/meBv3/

The HTML

<div class="wrapper">
<div class="page">
    page here
</div>
<div class="footer">
    Content for  class "footer" Goes Here
</div>
</div>

the CSS

/* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */

html, body{
height:100%;    /* to keep .footer on bottom */
margin:0;   /* to get rid of scroll bar, because (100% + default margin = scroll) */

}
.wrapper {
min-height: 100%;   /* to keep .footer on bottom */
position: relative; /* must be relative or .footer will cover content */
}
.page {
padding-bottom:2.2em;   /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/

}
.footer {
position: absolute; /* to keep .footer on bottom */
bottom: 0px;    /* to keep .footer on bottom */
height:2em; /* height must be smaller then .page's bottom padding */

}

CSS Footer at bottom of page

1 Answers