Eu quero um rodapé para ficar na parte inferior da página. Então eu criei um DIV commin-heigt:100% e um DIV sem configuração de altura para animar um carregamento de conteúdo ajax:

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;
}

Quando eu carrego a página e o conteúdo é muito menor que minha tela, tudo funciona perfeito. O rodapé está na parte inferior da tela como supostamente.

Eu agora estou animando oanimater usando quadros-chave CSS. Quando a animação termina, estou substituindo o conteúdo deanimater e enriqueça de novo. Quando o conteúdo é menor que a tela novamente, o rodapé está no topo da minhaanimater. Mas quando estou recarregando a página "manualmente" (para que o conteúdo não fique animado), o rodapé é posicionado corretamente.

Então eu preciso de um rodapé que fica na parte inferior do conteúdo, qualquer que seja a altura do conteúdo. Eu não posso dar ao animador min-height porque ele não está no topo da página.