Question

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

CSS（Code Stripped只显示相关的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

Answer 1

添加

html, body { height : 100% }

请参阅cssdesk或jsfiddle

Answer 2

如果我理解你的粘性页脚是什么意思，那么我建议你使用这段代码：

.footer {
    background-color：#fff;
    的位置是：固定;
     bottom：0; //在页面的最底部设置粘性
}

CSS - 页脚内部多个Div的粘滞页脚不起作用

2 个答案: