Html CSS页脚定位问题

以下是我到目前为止的预览：

红色区域是设计的一部分，应始终随设计向下滚动。因此，当内容展开时，页脚和红色条也随之展开。这应该在窗口的最底部

我试着将它定位在绝对位置，它工作得非常好，除非我重新调整了浏览器的大小并使其变小，它将保持在最底部，但只有在浏览器全屏时才能工作

我现在所做的只是定位它相对于顶部：-120px；然后你可以看到，它给了我额外的空白，我想去掉

footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }

不知道还有什么代码要粘贴，我想这就是所有人都需要的。其余的都是不言自明的。有人对如何处理这个问题有什么建议吗

---

我的目标是让它与上图一样，除了没有空格，在底部一直向下推，即使浏览器重新调整大小。

当您用

位置：相对
偏移某个对象时，元素仍然“保留”它本来会占用的空间-在您的情况下，在底部区域，您可以获得空白。在页脚上设置
页边距底部：-115px
，告诉它不要这样做。
粘性页脚可能很棘手，添加重叠背景可能更麻烦。您可能希望尝试的是创建背景图像，并将背景图像应用于主体或容器背景，然后重复-x并定位底部

您是否能够创建一个粘贴页脚，我可以向您展示我的意思。
我们也使用粘贴页脚-以下是一些基本信息：

<div id="container">
  <div id="header">Header</div>
  <div id="nav">
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
    </div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>

唯一的缺点是这是一个固定高度的页脚。也不要忘记，如果您在页脚上添加了任何填充，从而增加了页脚的高度和高度，则需要相应地调整容器上的clearfooter和负边距

如果您碰巧需要它在IE6中工作，您需要以您喜欢的方式瞄准容器并使用：

#container {
   height: 100%;
}

希望有帮助
 事实上，这没有任何作用，它只是把红色条放在黑色条的正下方，所以它看起来好像没有任何余量。听起来好像你在试图重新发明轮子。谷歌搜索“粘性页脚”。
#container {
   height: 100%;
}