让我的页脚粘在页面底部

Question

编辑：在您回答之前，请阅读此内容！我无法设置类似“身高：30px”的页脚因为它必须伸展！这就是大多数解决方案不起作用的原因!!

好的，我有一个问题。如果有足够的内容，我的页脚会很好地粘贴在页面底部，但是当我只有几行内容时，页脚下面会有一个空白区域。图片：

（来源：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page）

我从那张图片中获得的图片提供了一个解决方案，但它对我不起作用。因为我的页脚需要是动态的（我不知道像素的高度或者无论如何，div只会延伸到页脚中的内容量）

我发现的所有解决方案都需要指定页脚的高度...我怎样才能让页脚停留在页面底部？

我的div看起来像这样：

<div class="mobile_main">
    <div class="header">
        Stuff
    </div>
    <div class="body_main">
        Stuff
    </div>
    <div class="footer_mobile">
        Stuff
    </div>
</div>

主div中的所有3个div都按内容拉伸（未指定高度）。

有没有人有解决方案？

Answer 1

你可以在foot_main容器div的左下角给页脚一个绝对位置。因此你也应该给这个容器一个相对的位置。

http://jsfiddle.net/kasperfish/FQ6fG/5/

.mobile_main{
    position:relative;
}
.body_main{
    background:grey;
    min-height:300px;

}
.footer_mobile{
    width:100%;
    position:absolute;
    bottom:0px;
    left:0px;
    background:lightblue;

}
.header{
    background:yellow;
}

Answer 2

我认为您希望页脚始终固定在屏幕底部。如果它在这里是解决方案。

.footer_mobile{
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    background:lightblue;
}

但是，如果您希望页脚应保持在主容器下方，直到容器高度小于窗口高度和页脚在容器高度大于窗口屏幕大小时固定在窗口屏幕底部。对于那种情况，我们必须使用jQuery进行解决。

Answer 3

不要在页脚中使用高度。

#body {
    padding:10px;

}
#footer {
    position:absolute;
    bottom:0;
    width:100%;

    background:#6cf;
}