CSS - 页脚内有多个 div 的粘性页脚不起作用答案

【问题标题】：CSS - Sticky Footer With Multiple Divs Inside Footer Not WorkingCSS - 页脚内有多个 div 的粘性页脚不起作用
【发布时间】：2013-05-23 17:05:15
【问题描述】：

我正在尝试实现一个粘性页脚，它在页脚 div 内堆叠了三个 div。现在，如果我加载一个将内容块保持为空的页面，页脚不再粘滞:(。我想知道我做错了什么？

CSS（代码剥离以仅显示相关的 CSS）：

/* Custom Sticky Footer */
 .wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -553px; /* Should be -553 px, but somehow doesnot work. This is a hack */
}
.push,
.footer {
    height: 553px;
}

.footer{
    background-color: #fff;
}

#footer-margin-top{
    height: 20px;
}
#footer-top{
    background-color: #333333;
    height:402px;
}
#footer-bottom{
    background-color: #232323;
    height: 131px;
    border-top: 1px solid #444444;
}

和 HTML（代码被剥离以仅显示相关的 div）：

<!DOCTYPE html>
<html lang="en">

    <head>


    </head>

    <body>
    <div class="wrap">
    <div class="container">
    </div>
    <div class="push"></div>
    </div>
    <div class="footer">
        <div id="footer-margin-top"></div>
        <div id="footer-top">
            <div class="row-fluid">
                <div class="span12 social">
                </div>
            </div>
        </div>
        <div id="footer-bottom"></div>
    </div>
</body>
</html>

JSFiddle

【问题讨论】：

你没有使用 jquery 吗？您是否希望在单击按钮时弹出页脚菜单？还是您总是希望页脚具有相同的高度？如果总是相同的高度，只需使用 position: fixed bottom: 0 作为页脚
什么是“内容块”？我真的看不出 jsfiddle 有问题，所以我认为我不理解
您是否试图在twitter.github.io/bootstrap/examples/sticky-footer.html 上获得效果，如果页脚填满屏幕，页脚位于内容下方，否则位于页面底部？
anonymousxxx 的解决方案解决了我的问题。谢谢大家的cmets。

标签： html css sticky-footer

【解决方案1】：

如果我对粘性页脚的意思理解正确，那么我建议您使用以下代码：

.footer{
background-color: #fff;
position:fixed;
bottom:0; //在页面最底部设置置顶
}

【讨论】：

【解决方案2】：

只需添加

html, body { height : 100% }

参见cssdesk 或jsfiddle

【讨论】：