粘性页脚无法固定在页面底部

Question

我似乎在我的网站底部遇到了问题。基本上它不会粘在我的页面底部，而是粘在我的名为main的div底部。有人能帮我解决吗？如果您缩小网页，您将看到这个问题：）以下是该网站。

我不会粘贴代码，因为其中包括了很多php文件。希望这样可以。:)

footer css:

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

}

- Teilmann

---

可能是Sticky footer acting weird的重复问题。 - j08691

请问您能否发布 #footer 的 CSS 代码吗？ - Tom

当然，我现在已经添加了它。 :) - Teilmann

它在Win 7上的Chrome 21中工作。 - Roddy of the Frozen Peas

你还没有告诉页脚保持固定。 - Tom

Answer 1

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

- Tom

---

我因正确回答粘性页脚而受到了点赞，但仍然没有解决我的问题。也许我误解了粘性页脚的概念，但我所要求的是让页脚始终保持在文档底部，不一定要显示在屏幕上。抱歉，我的英语不好。 - Teilmann

那就不是一个固定页脚了。只需按照您的方式进行操作，并在内容div上设置1000px的最小宽度，将其推到底部。此外，我的答案对于您提出的问题是正确的。 - Tom

在添加我的评论之前，我没有注意到这一点，抱歉。仅供澄清： “sticky”元素是指固定在页面上的元素，并且根据定义不会移动。 - Tom

我现在正在尝试这个。真的无法让它工作:P - Teilmann

让我们在聊天中继续这次讨论：http://chat.stackoverflow.com/rooms/15096/discussion-between-thomas-teilmann-and-tom - Teilmann

Answer 2

针对您提到的网站，通过扩展包装器div，可以将页脚向下推。以下是包装器的修改后css样式。

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

将高度设为100%而非自适应高度。

将包裹层的高度设为100%，可以将该div延伸到窗口底部，并将页脚也一同推下。

另外，我建议不要让#footer左浮动。

- chop

---

使用 !important 是非常糟糕的风格。相反，您应该调整特定性，以便浏览器呈现样式而不是其他样式。 - Roddy of the Frozen Peas

@Tom，根据你的问题，你的解决方案是最准确的。 (+1) 我选择了另一种方法来解决这个问题，仍然可以把页脚放在屏幕底部。原因是页脚背景图像顶部有白色，就像主要内容一样。我觉得网页没有主要内容背景图像中的间隙会更好看。下次我会更加密切地遵循操作规程。 - chop

是的，让它看起来更整洁将由OP负责。也许OP已经得到了他想要的答案。 - chop

我讨厌那些得到他们想要的答案后就消失了，而不标记它为正确答案的人。 - Tom

我还没有尝试过这些，因为我刚下班回家，还得做些食物。放松一下。谢谢你的回复。 - Teilmann