html - 页面底部的页脚

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

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

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

Answer 2

您有 2 个选项：

1）把footerbg里面wrapper

2）放入footerbg与包装器相同的样式（相同的宽度和边距值）

Answer 3

包装器应该是内容的容器

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

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

​</p>

我将页脚设置在包装器的底部，如果您想将顶部移到外面也可以，但请记住，您还必须调整底部填充以补偿其高度。

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