Html CSS-页脚内有多个div的粘性页脚不起作用_Html_Css_Sticky Footer

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

html css

Html CSS-页脚内有多个div的粘性页脚不起作用,html,css,sticky-footer,Html,Css,Sticky Footer,我正在尝试实现一个粘性页脚，它在页脚div中堆叠了三个div。现在，如果我加载一个内容块为空的页面，页脚不再粘性：（.我想知道我做错了什么 CSS（代码剥离以仅显示相关CSS）：和HTML（代码剥离，仅显示相关div）：只需添加 html, body { height : 100% } 请参见或如果我正确理解了您对sticky footer的意思，那么我建议您使用以下代码： .footer{ 背景色：#fff；位置：固定；底部：0；//在页面最底部设置粘性 }您不是在使用jque

我正在尝试实现一个粘性页脚，它在页脚div中堆叠了三个div。现在，如果我加载一个内容块为空的页面，页脚不再粘性：（.我想知道我做错了什么

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

和HTML（代码剥离，仅显示相关div）：

只需添加

html, body { height : 100% }

请参见或

如果我正确理解了您对sticky footer的意思，那么我建议您使用以下代码：

.footer{
背景色：#fff；
位置：固定；
底部：0；//在页面最底部设置粘性

}

您不是在使用jquery吗？您是希望在单击按钮时弹出页脚菜单？还是始终希望页脚具有相同的高度？如果始终具有相同的高度，只需使用位置：固定底部：0作为页脚“内容块”是什么我真的看不出JSFIDLE中有什么问题，所以我认为我不理解您是否试图获得页脚在内容下方（如果页脚填满屏幕）或页面底部（如果没有）的效果？anonymousxxx的解决方案修复了我的问题。感谢大家的评论。

<!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>

html, body { height : 100% }