页脚位置问题 - CSS [重复]答案

【问题标题】：Footer position issue - CSS [duplicate]页脚位置问题 - CSS [重复]
【发布时间】：2014-01-16 16:04:34
【问题描述】：

谁能帮助我为什么页脚没有进入页面底部？

http://dev.unwaveringmedia.com/billy/

你可以看到黑色页脚后面的空格。我不需要那个并且希望页脚完全位于页面底部？

【问题讨论】：

谷歌置顶页脚
确实像ryanfait.com/sticky-footer

标签： html css

【解决方案1】：

你有很多选择来处理这个问题。

选项 1

.footer-container{
    position:absolute;
    bottom:0;
}

选项 2

使用粘性页脚

选项 3

html, body {
      padding: 0;
      margin: 0;
      height: 100%;
}

#wrapper {
      min-height: 100%;
      position:relative;
}

#content {
      padding-bottom: 75px;   /* This value is the height of your footer */
}

.footer-container {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 75px;  /* This value is the height of your footer */
}

【讨论】：

太棒了，我用了你的第三个选项，它对我有用！

【解决方案2】：

您只需要在页脚之前添加一些内容（或尝试上面列出的其他选项之一）。

我做了这个并且它修复了它：

就在<div class="footer-container">之前
输入这个html：<div style="min-height:500px;">test</div>

这使它正常工作。所以这应该告诉你你遇到的问题。要么给它一个最小高度，要么只是在其中添加你的内容（一些 lorem ipsem 等），或者找到其他方法来修复它。

【讨论】：

【解决方案3】：

试试这个

.footer-container {
    bottom: 0;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}

【讨论】：

【解决方案4】：

你应该把 .footer-container 给 bottom:0;和位置：绝对将页脚固定在底部。

.footer-container {
    bottom: 0;
    position: absolute;
}

【讨论】：