CSS页脚定位问题

Question

这是我到目前为止的预览：

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

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

我现在正在做的只是将它相对于顶部定位：-120px;然后如你所见，它给了我想要摆脱的额外空白。

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

不确定要粘贴的其他代码，我认为这是所有人都需要的......剩下的就是自我解释了。有没有人对如何处理这个有任何建议？

我的目标是让它像上面的图像一样，除非没有空白，始终在底部向下推，即使浏览器重新调整大小。

谢谢！

Answer 1

粘性页脚可能很棘手，添加重叠背景可能会更加糟糕。你可能想要尝试的是创建一个Sticky footer并将背景图像应用到body-container背景重复-x和底部位置。

您是否可以创建jsfiddle，我可以向您展示我的意思。

Answer 2

我们也使用粘性页脚 - 这是基础知识：

<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。然后使用CSS，你需要这样的东西：

html, body {    
   height: 100%; 
}

#container {
   min-height: 100%;
   margin-bottom: -330px;
   position: relative;
}

.clearfooter {
   height: 330px;
   clear: both;
}

#footer {
   height: 330px;
   position: relative;
}

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

如果您碰巧需要它在IE6中工作，您需要定位容器，无论您喜欢和使用它：

#container {
   height: 100%;
}

希望有所帮助！

Answer 3

当您使用position: relative偏移某些内容时，该元素仍会“保留”它本来会占用的空间 - 在您的情况下，您获得空白的底部区域。在页脚上设置margin-bottom: -115px，告诉它不要这样做。