CSS页脚定位的问题

这里是我到目前为止预览： CSS页脚定位的问题

红色区域是设计的一部分，应始终打倒设计滚动。所以当内容扩展时，页脚和那个红色条就会随之而去。这应该在窗口的最底部。

我试着将其定位绝对，它的工作完美，除非当我重新调整浏览器的大小并使其变小时，它将停留在最底部，但只在浏览器处于全屏时才起作用。

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

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

不知道还有哪些代码需要粘贴，我想这就是所有人都需要的..其余的是自我解释。有没有人有任何建议如何解决这个问题？

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

谢谢！

来源

2011-08-31 Drew

这听起来像你试图重新发明轮子。谷歌的“粘脚”。 – thirtydot

我们使用粘滞页脚以及 - 这里的基本知识：

<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和negative margin。

如果你碰巧需要它在IE6中工作，你就需要为目标的容器，但是你会喜欢和使用：

#container { 
    height: 100%; 
}

希望帮助！

来源

2011-09-01 03:16:58

当你用position: relative抵消某些东西时，元素仍然“保留”它本来会占用的空间 - 在你的情况下，你得到空白的底部区域。在你的页脚上设置margin-bottom: -115px，告诉它不要这样做。

来源

2011-08-31 22:50:32 Artyom

实际上它并没有做任何事情，它只是把红色条放在黑色条的下面，所以它的表现就像没有任何保证金。 – Drew

粘滞的页脚可能会很棘手，添加一个重叠的背景可能会更加怪异。你可能想要尝试的是创建一个Sticky footer并将背景图像应用到正文或容器背景重复-x和位置底部。

你能够创建一个jsfiddle，我可以告诉你我的意思。

来源

2011-08-31 22:51:50

CSS页脚定位的问题

回答

相关问题