页面底部的 CSS 页脚

Posted 2023-03-21

【中文标题】页面底部的 CSS 页脚

【英文标题】：CSS Footer at bottom of page

【发布时间】：2013-01-04 16:30:42

【问题描述】：

我希望页脚留在页面底部。所以我创建了一个带有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 的顶部。但是当我“手动”重新加载页面时（这样内容就不会被动画化），页脚的位置是正确的。

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

【问题讨论】：

试过CssStickyFooter 之类的东西了吗？ PS。帮助了解您需要/想要支持的浏览器。

当你为关键帧设置动画时，它是否又默认回到一个位置：相对？如果在关键帧末尾再设置一次，有帮助吗？

不。将其设置为 relative 会使页脚粘在动画器的底部。但是动画师没有到达页面的底部。我想支持大多数主流浏览器，如 Safari、FF，如果可能的话还支持 IE10+

【参考方案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 */

【讨论】：

就像我在问题中所说的那样，我已经让它工作了。但问题是当内容的高度动态变化时。然后页脚不再粘在底部。