CSS 页脚定位问题

发布于 2024-12-02 12:35:31 字数 544 浏览 0 评论 0原文

这是我迄今为止所拥有的内容的预览：

红色区域是设计的一部分，应始终随设计一起向下滚动。因此，当内容扩展时，页脚和红色栏也会随之扩展。它应该位于窗口的最底部。

我尝试将其绝对定位并且它工作得很好，除了当我重新调整浏览器大小并将其缩小时，它会停留在最底部，但仅在浏览器全屏时才工作。

我现在所做的只是将其相对于 top:-120px; 定位然后如您所见，它给了我想要摆脱的额外空白。

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

不知道还要粘贴什么代码，我认为这就是每个人都需要的。其余的都是不言自明的。有人对如何解决这个问题有任何建议吗？

我的目标是让它像上图一样，除了没有空白之外，即使在调整浏览器大小时，也始终将其推到底部。

原文

Here is a preview of what I have so far:

The red area is part of the design and should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.

I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.

What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.

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

Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this?

My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ぺ禁宫浮华殁 2024-12-09 12:35:31

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

<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>

注意容器末尾之前的清除页脚。然后使用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%;
}

希望有帮助！

we use a sticky footer as well - here's the basics:

<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>

Note the clearfooter before the end of the container. Then with CSS you need something like this:

html, body {    
   height: 100%; 
}

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

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

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

The only downside is that this is a fixed height footer. Don't forget, too if you add any padding to your footer that increases the height and your height on the footer, clearfooter and negative margin on the container need to be adjusted accordingly.

If you happen to need it to work in IE6 you'll need to target the container however you'd like and use: