Нижний колонтитул CSS внизу страницы

Я хочу, чтобы нижний колонтитул оставался внизу страницы. Итак, я создал DIV сmin-heigt:100% и DIV без установки высоты для анимации загрузки содержимого 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;
}

Когда я загружаю страницу, а ее содержимое намного меньше моего экрана, все работает отлично. Нижний колонтитул находится в нижней части экрана, как предполагается.

Я сейчас оживляюanimater используя ключевые кадры CSS. Когда закончится анимация, я заменяю содержимоеanimater и оживить его снова. Когда содержание меньше, чем экран снова, нижний колонтитул находится в верхней части моегоanimater, Но когда я перезагружаю страницу «вручную» (чтобы контент не анимировался), нижний колонтитул позиционируется правильно.

Поэтому мне нужен нижний колонтитул, который находится внизу содержимого независимо от его высоты. Я не могу дать минимальную высоту аниматора, потому что она не в верхней части страницы.

Ответы на вопрос(1)

Ваш ответ на вопрос