我希望页脚留在页面底部。所以我创建了一个 DIVmin-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 关键帧制作动画。当 out 动画结束时,我将替换 的内容animater
并将其重新动画化。当内容再次小于屏幕时,页脚位于我的animater
. 但是当我“手动”重新加载页面时(这样内容就不会被动画化),页脚的位置是正确的。
因此,无论内容的高度如何,我都需要一个位于内容底部的页脚。我不能给动画师最小高度,因为它不在页面顶部。