0

我正在尝试实现一个粘性页脚，它在页脚 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

4

2 回答 2

1

只需添加

html, body { height : 100% }

在cssdesk或jsfiddle上查看

于 2013-05-28T16:34:41.030 回答
0

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

.footer{
背景颜色：#fff;
位置：固定；
底部：0； //在页面最底部设置置顶
}

于 2013-05-28T16:52:11.627 回答