Quiero un pie de página para permanecer en la parte inferior de la página. Así que creé un DIV conmin-heigt:100% y un DIV sin configuración de altura para animar una carga de contenido 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;
}

Cuando cargo la página y el contenido es mucho más pequeño que mi pantalla, todo funciona perfectamente. El pie de página se encuentra en la parte inferior de la pantalla como se supone.

Ahora estoy animando elanimater utilizando CSS keyframes. Cuando la animación finaliza, estoy reemplazando el contenido deanimater y enimímalo de nuevo. Cuando el contenido es más pequeño que la pantalla, el pie de página se encuentra en la parte superior de mianimater. Pero cuando estoy recargando la página "manualmente" (para que el contenido no se anime), el pie de página se coloca correctamente.

Así que necesito un pie de página que se encuentre en la parte inferior del contenido, independientemente de la altura que tenga el contenido. No puedo dar la altura mínima del animador porque no está en la parte superior de la página.