页面底部的 CSS 页脚

Question

我希望页脚位于页面底部。因此，我创建了一个带有 min-heigt:100% 的 DIV 和一个没有高度设置的 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;
}

当我加载页面并且内容比我的屏幕小得多时，一切正常。页脚按预期位于屏幕底部。

我现在正在使用 CSS 关键帧为 animater 制作动画。当 out 动画结束时，我将替换 animater 的内容并再次将其激活。当内容再次小于屏幕时，页脚位于我的 animater 的顶部。但是当我“手动”重新加载页面时(这样内容就不会动画化)，页脚位置正确。

因此，无论内容的高度如何，我都需要一个位于内容底部的页脚。我不能给动画师最小高度，因为它不在页面顶部。

Answer 1

我做的这个例子展示了让页脚保持向下所需的最小 css。 http://jsfiddle.net/meBv3/

HTML

<div class="wrapper">
<div class="page">
    page here
</div>
<div class="footer">
    Content for  class "footer" Goes Here
</div>
</div>

CSS

/* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */

html, body{
height:100%;    /* to keep .footer on bottom */
margin:0;   /* to get rid of scroll bar, because (100% + default margin = scroll) */

}
.wrapper {
min-height: 100%;   /* to keep .footer on bottom */
position: relative; /* must be relative or .footer will cover content */
}
.page {
padding-bottom:2.2em;   /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/

}
.footer {
position: absolute; /* to keep .footer on bottom */
bottom: 0px;    /* to keep .footer on bottom */
height:2em; /* height must be smaller then .page's bottom padding */

}