让我的页脚粘在页面底部答案

【问题标题】：Making my footer stick to bottom of the page让我的页脚粘在页面底部
【发布时间】：2014-01-13 11:49:21
【问题描述】：

编辑：在您回答之前，请阅读此内容！我不能设置像“高度：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 都按内容拉伸（未指定高度）。

有人有解决办法吗？

【问题讨论】：

可能重复：stackoverflow.com/questions/616290/…
@kamil 这两种解决方案都要求页脚具有高度值
How do you get the footer to stay at the bottom of a Web page?的可能重复
可能重复：stackoverflow.com/questions/42294/…>
你能在 www.jsfiddle.net 上给我们看一个 Demo，因为你提供的源代码是为我工作的，没有固定的高度。

标签： css html footer

【解决方案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;
}

【讨论】：

如果页面高度大于屏幕高度则不起作用：theduck.kapsi.fi
theduck.kapsi.fi 现在它遍历页面底部的内容，在较短的页面上theduck.kapsi.fi/gs,glsdk 问题又回来了：/ 另外，不想使用最小高度，因为我希望页面能够拉伸以很好地匹配移动浏览器。
不要为此使用最小高度。只需将主容器的宽度和高度设置为 100%
您的答案中有最小高度，所以我认为它是必要的。但是，您现在在较短的页面上看到了问题，它基本上不适用于您的解决方案：/

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

不要在页脚中使用高度。

#body {
    padding:10px;

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

    background:#6cf;
}

【讨论】：