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制作动画。当动画结束时，我正在替换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 */

}

页面底部的CSS页脚

1 个答案: