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.

Answer 1

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 */

}