CSS页脚在页面底部 [英] CSS Footer at bottom of page

问题描述

我想要一个页尾停留在网页底部。所以我创建了一个DIV与 min-heigt：100％和一个DIV没有高度设置为动画ajax内容加载：

I want a footer to stay at the bottom of the page. So I created a DIV with min-heigt:100% and a DIV with no height setting for animating an ajax content loads:

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;
}

当我加载页面，内容比我的屏幕小得多，一切都很完美。页脚在屏幕的底部假设。

When I load the page and the content is much smaller than my screen everything works perfect. The Footer is at the bottom of the screen as supposed.

我现在使用CSS关键帧动画化 animater 当out动画结束时，我替换 animater ，然后重新键入。当内容小于屏幕再次时，页脚位于我的动画的顶部。但是当我重新加载页面手动（所以内容没有动画），页脚被正确定位。

I'm now animating the animater using CSS keyframes. When the out animation ends, I'm replacing the content of animater and enimate it back in again. When the content is smaller then the screen again, the footer is at the top of my animater. But when I'm reloading the page "manually" (so that the content does not get animated), the footer is positioned properly.

所以我需要一个页脚在内容的底部无论内容的高度。

So I need a footer that sits at the bottom of the content whatever height the content has. I cannot give the animater min-height 'cause it is not at the top of the page.

推荐答案

我做的这个例子显示了最小的CSS需要得到一个脚注停下来。 http://jsfiddle.net/meBv3/

This example I made shows the minimum css needed to get a footer to stay down. 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页脚在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！