css - 让我的页脚贴在页面底部

Question

编辑:在您回答之前，请阅读此内容!我无法将页脚设置为“高度:30 像素；”因为它必须拉伸(stretch)!这就是为什么大多数解决方案都不起作用的原因!!

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

(来源:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page)

我从中获取该图像的页面提供了一种解决方案，但它对我不起作用。因为我的页脚需要是动态的(我不知道以像素为单位的高度或其他任何东西，div 只是根据页脚中放置的内容量进行拉伸(stretch))

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

我的 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 都按内容拉伸(stretch)(未指定高度)。

有没有人有解决办法？

Answer 1

您可以在 mobile_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;
}