页面底部的页脚

Question

我希望我的页脚位于页面底部，但它不起作用。总有一个滚动条，为什么会这样？

http://www.yannickluijten.be/luc/website/

#top {
position: relative;
width: 100%;
height: 50px;
background: #00aeef;

}

#wrapper {
position: relative;
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;

}

#footerbg {
width: 100%;
height: 20px;
background: #d7d7d7;

}

.push {
height: 20px;

}

<div id="top"></div>
<div id="wrapper">
    <div class="push"></div>
</div>
<div id="footerbg"></div>

Answer 1

包装器应该是内容的容器

看看这里：http://jsfiddle.net/F577v/

<div id="top"></div>
<div id="wrapper"> 
    <div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>

我将页脚按到包装外面的底部，如果你想将顶部向外移动也很好但是记住你必须调整底部填充以补偿它的高度。

在此处查看更新后的代码：http://jsfiddle.net/F577v/2/

Answer 2

尝试更新版本：http://jsfiddle.net/F577v/8/

首先，您的容器不需要相对位置。 其次，页脚应该通过将宽度和左/右边距设置为自动来居中：

#footerbg {
    width: 960px;
    ....
    margin-left: auto;
    margin-right: auto;
}​

Answer 3

您有两个选择：

1）将footerbg放在wrapper

中

2）放入footerbg与包装器相同的样式（相同的宽度＆amp; margin 值）