Нижний колонтитул 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
, Но когда я перезагружаю страницу «вручную» (чтобы контент не анимировался), нижний колонтитул позиционируется правильно.
Поэтому мне нужен нижний колонтитул, который находится внизу содержимого независимо от его высоты. Я не могу дать минимальную высоту аниматора, потому что она не в верхней части страницы.