我试图让我的页脚在页面的末尾,所以我使用position：absolute和bottom：0来做到这一点.
问题是背景颜色不会扩展到适合屏幕,所以我尝试使用宽度：100％,但现在它有额外的像素
问题是背景颜色不会扩展到适合屏幕,所以我尝试使用宽度：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：
<body>
<nav>
<ul id='navBar'>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</nav>
<div id="contentWrapper">
<section id="intro">
<header>
<h2>Intro</h2>
</header>
<p>Paragraph goes here,long and long paragraph,blah blah blah. Paragraph goes here,blah blah blah.
Paragraph goes here,blah blah blah.
</p>
</section>
</div>
<footer>
<section id="about">
<header>
<h3>Footer</h3>
</header>
<p>some text here. </p>
</section>
</footer>
</body>
解决方法
尝试使用
box-sizing: border-box;将边框和填充区域约束到< footer>的宽度. – 作为填充：10px 20px规则是导致滚动条出现的原因.
footer {
position:absolute;
background: #222;
color: #fff;
list-style: none;
font-size: 1.2em;
padding: 10px 20px;
bottom:0;
width: 100%;
Box-sizing: border-Box;
}
