I'm trying to keep a footer at the bottom of the page by setting a DIV with min-height:100% and another DIV for animating ajax content loads.
Here is how I set it up in HTML:
<div class="main">
<div class="header navi>…</div>
<div class="animater">
<!-- content here -->
<div class="footer">
<!-- footer content here -->
</div>
</div>
</div>
And here is my CSS setup:
.main {
min-height:100%;
margin-left:auto;
margin-right:auto;
position:relative;
}
.header {
// height, width, margin, position
}
.animater {
// empty
}
.footer {
bottom:0px;
position:absolute;
}
Initially, when the content is smaller than the screen, everything looks good. The footer stays at the bottom as intended. However, when I animate the "animater" using CSS keyframes, things go awry. After the animation ends and I replace the content, sometimes the footer ends up at the top of the "animater". But if I manually reload the page (without animations), the footer stays properly positioned.
What I really need is a footer that always sticks to the bottom of the content, regardless of its height. Setting min-height on the "animater" doesn't work because it's not at the very top of the page.