我试图让我的页脚在页面的末尾,所以我使用position：absolute和bottom：0来做到这一点.
问题是背景颜色不会扩展到适合屏幕,所以我尝试使用宽度：100％,但现在它有额外的像素
这是我创建的例子
http://jsfiddle.net/SRuyG/2/
(对不起,它有点乱,我刚开始学习CSS)
我也从我找到的一些教程中尝试了粘性页脚,但它也没有用.
那么我怎样才能将页脚设置到页面底部并且背景符合屏幕大小？
谢谢
CSS：
html, body {
margin: 0;
padding: 0;
}
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
.contentWrapper{
min-height: 100%;
margin-bottom: -142px;
}
.contentWrapper:after {
content: "";
display: block;
height: 142px;
}
nav {
background: #222;
color: #fff;
list-style: none;
font-size: 1.2em;
padding: 10px 20px;
box-shadow: 0px 0px 4px 4px #888888;
}
#navBar li{
display:inline;
}
#navBar li a{
color: #fff;
text-decoration: none;
padding: 25px;
}
#navBar li a:hover{
background:#fff;
color: #222;
text-decoration: none;
padding: 25px;
}
footer {
position:absolute;
background: #222;
color: #fff;
list-style: none;
font-size: 1.2em;
padding: 10px 20px;
bottom:0;
width: 100%;
}
HTML：
Intro
Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
Footer
some text here.