粘性页脚不粘在页面底部答案

【问题标题】：Sticky footer not sticking to bottom of page粘性页脚不粘在页面底部
【发布时间】：2012-08-09 04:30:50
【问题描述】：

我的网站页脚似乎有问题。基本上它不会粘在我的页面底部，而是粘在我的 div 底部，称为 main。谁能帮我这个？

如果您缩小网页，您会看到问题:)

我没有粘贴代码，因为它包含很多 php 等。希望没事。 :)

页脚css：

#footer{
width: 100%;
float: left;
height: 70px;
bottom: 0;
clear: both;
background-image: url("../images/footer_pattern.png");
display: block;

}

【问题讨论】：

Sticky footer acting weird的可能重复
不太一样。最后一个问题得到了回答。我的内容页面现在正在扩展并将页脚向下推，但它并没有粘在底部。和以前的问题不一样了。
你能把#footer的CSS贴出来吗？
当然，我现在添加了它。 :)
它在 Win 7 上的 Chrome 21 中运行。

标签： html css sticky-footer

【解决方案1】：

#footer{
    width: 100%;
    height: 70px;
    clear: both;
    background-image: url("../images/footer_pattern.png");
    position: fixed;
    bottom: 0;
}

【讨论】：

支持置顶页脚的正确答案，但仍然没有解决我的问题。我想我可能误解了粘性页脚的概念，但我要求的是让页脚始终留在文档的底部，而不是不必要地显示在屏幕上。对不起我的英语。
那不是粘性页脚。只需按照您的方式进行操作，然后在内容 div 上放置一个 1000px 的最小宽度以将其推到底部。而且，我的回答对你提出的问题是正确的。
在添加评论之前我没有注意到这一点，抱歉。只是为了澄清：“粘性”元素是粘在页面上并且根据定义不会移动的元素。
我现在实际上正在尝试。我真的无法让它工作：P
让我们continue this discussion in chat

【解决方案2】：

对于您所指的网站，通过扩展包装器 div，它会将页脚向下推。下面是包装器的修改后的css。

  #wrapper
  {
      height: 100%;
      margin: 0 auto;
      min-width: 1000px;
  }

将高度设置为 100% 而不是自动。

通过将包装器高度设置为 100%，它会将 div 扩展到窗口底部，并将页脚也向下推。

我要改变的另一件事是不让#footer 向左浮动。

【讨论】：

使用!important 是非常糟糕的风格。相反，您应该调整您的特殊性，以便浏览器将样式呈现在其他样式之上。
我在回答中添加了说明。我指的是#wrapper div，它是围绕页脚和页面其余部分的div。我从原始海报所指的网站上获得了 css 代码。
@chop，感谢您在答案开头添加您的说明。这更有意义
是的，但是 OP 需要一个粘性页脚。当内容大于窗口时，您的解决方案会将页脚向下推到窗口中文档的显示之外。为了使其成为粘性页脚，无论内容大小如何，页脚都必须显示在窗口底部。
@Tom，根据您的问题，您的解决方案是最准确的。（+1）我选择以不同的方式解决这个问题，仍然将页脚放在屏幕底部。原因是页脚背景图像的顶部与主要内容一样具有白色。我觉得网页在主要内容的背景图像中没有间隙会更好看。下次我会更密切地关注操作。