如何让页脚留在底部？ [复制]答案

【问题标题】：How to make a footer stay on the bottom? [duplicate]如何让页脚留在底部？ [复制]
【发布时间】：2014-02-20 19:17:41
【问题描述】：

我有一个页面，我希望页眉保持在页面顶部，页脚保持在底部，如果页面内容超过空间允许，则放置在主要内容区域中的内容可以滚动，但我不知道该怎么做。

HTML

    <header>
        <div id="headerContainer">
            <img src="images/logo.png" alt="" />
        </div><!-- END headerContainer -->

    </header>

    <div id="bodyContainer">

        <div id="products">
            <ul>
                <li><img src="images/mc1.png" alt="" /></li>
                <li><img src="images/mc1r.png" alt="" /></li>
                <li><img src="images/mc3.png" alt="" /></li>
                <li><img src="images/mc3e.png" alt="" /></li>
            </ul>
        </div><!-- END products -->

    </div><!-- END bodyContainer -->

    <footer>

        <div id="footerContainer">
        </div><!-- END footerContainer -->

    </footer>

CSS

header {
    width: 100%;
    height: 200px;
    background: #808284;
    background-image: -o-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -moz-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -webkit-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -ms-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: linear-gradient(to top, #58595b 0%, #808284 100%);
    border-bottom: 5px solid #d9b34d;
    box-shadow: 3px 0px 5px #0b0b0b;
}

#headerContainer {
    width: 1200px;
    margin: 0 auto;
}

#headerContainer img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
}

#bodyContainer {
    width: 1200px;
    margin: 0 auto;
}

footer {
    width: 100%;
    height: 100px;
    background: #808284;
    background-image: -o-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -moz-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -webkit-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -ms-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: linear-gradient(to top, #808284 0%, #58595b 100%);
    box-shadow: 3px 0px 5px #0b0b0b;
    position: absolute;
    bottom: 0;
    right: 0;
}

【问题讨论】：

谷歌搜索“粘性”页脚，有很多关于如何完成此操作的指南

标签： html css

【解决方案1】：

尝试更改为：

footer {
  position: fixed; /* instead of absolute */
}

【讨论】：

a fixed 位置会使页面上的元素溢出，in 不会与所有其他元素在同一个 z-index 和同一个“宇宙”中。
是的，它会让你的元素脱离潮流。
@Victor，没关系。这个答案给了 OP 正是他所要求的，一个固定的底部。
这不是提问者要查询的内容。
@Bucthree 在那种情况下，你很难描述你在寻找什么。

【解决方案2】：

我刚刚为你创建了this。

.site-footer, .page-wrap:after {
    /* .push must be the same height as footer */
    height: 141px;
}
.site-footer {
    border-top: 1px solid #666;
    background: #eeeeee;
}

【讨论】：