Chcę, aby stopka pozostała na dole strony. Więc stworzyłem DIVmin-heigt:100% oraz DIV bez ustawienia wysokości do animowania ładowań zawartości 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;
}

Kiedy ładuję stronę i zawartość jest znacznie mniejsza niż mój ekran, wszystko działa idealnie. Stopka znajduje się na dole ekranu zgodnie z przypuszczeniami.

Teraz animujęanimater przy użyciu klatek kluczowych CSS. Po zakończeniu animacji zastępuję zawartośćanimater i zrób to z powrotem. Gdy zawartość jest mniejsza niż ekran ponownie, stopka znajduje się na górze mojejanimater. Ale gdy ponownie ładuję stronę „ręcznie” (aby zawartość nie była animowana), stopka jest umieszczana prawidłowo.

Potrzebuję więc stopki, która znajduje się na dole treści, niezależnie od wysokości zawartości. Nie mogę podać minimalnej wysokości animatora, ponieważ nie ma go na górze strony.