Html CSS 宽度：100% 不适合屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17889642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS width:100% not fitting the screen
提问by punkaceratop
Im trying to make my footer to be at the end of the page, so I'm using position:absolute and bottom:0 to do this. The problem is the background color will not be extended to fit the screen, so I tried using width:100% but now it has extra pixels
我试图让我的页脚位于页面的末尾，所以我使用 position:absolute 和 bottom:0 来做到这一点。问题是背景颜色不会扩展到适合屏幕，所以我尝试使用 width:100% 但现在它有额外的像素
this is the example i created http://jsfiddle.net/SRuyG/2/(sorry it's a bit messy, i'm just starting to learn css)
这是我创建的示例 http://jsfiddle.net/SRuyG/2/（抱歉有点乱，我刚开始学习 css）
I also tried the sticky footer from some tutorials i found but it's not working either. So how exactly can I set the footer to the bottom of the page and the background fits the screen size?
我还尝试了我发现的一些教程中的粘性页脚，但它也不起作用。那么如何将页脚设置为页面底部并且背景适合屏幕尺寸呢？
Thank you
谢谢
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:
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, 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.
</p>
</section>
</div>
<footer>
<section id="about">
<header>
<h3>Footer</h3>
</header>
<p>some text here. </p>
</section>
</footer>
</body>
采纳答案by adrift
Try using box-sizing: border-box;to constrain the border and padding areas to the width of the <footer>- as the padding: 10px 20pxrule is what's causing the scroll bar to appear.
尝试使用box-sizing: border-box;将边框和填充区域限制为<footer>-的宽度，因为padding: 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;
}
回答by David
you can remove padding: 10px 20px;from footer and add footer section{margin:10px 20px}
您可以padding: 10px 20px;从页脚中删除并添加footer section{margin:10px 20px}
回答by mikedugan
Your footer is within the body, which is within the HTML. Since you haven't declared a width, it isn't going to expand any wider than it needs to. For your specific HTML, you should do something like this with your CSS:
您的页脚位于正文中，正文位于 HTML 中。由于您尚未声明宽度，因此它不会扩展得比需要的更宽。对于您的特定 HTML，您应该使用 CSS 执行以下操作：
body, html {
width: 100%; // or body { width: 960px; } if you're using a fixed width
}
footer {
width: 100%;
}
Ultimately, remember that any width set in a percentage is (almost) always going to be in comparison to the parent. 100% of a 50% parent is still 50%. 50% of a 75% parent is only going to yield 37.5% of the total viewport width.
最后，请记住，以百分比设置的任何宽度（几乎）总是与父级相比。50% 的父母的 100% 仍然是 50%。75% 父级的 50% 只会产生总视口宽度的 37.5%。
回答by sa77
try this..
尝试这个..
remove these rules from the footer..you'll be fine
从页脚中删除这些规则..你会没事的
position:absolute;
bottom:0;
width:100%;
回答by Ankit Aggarwal
From below css I have removed the padding property
从下面的 css 我删除了 padding 属性
footer {
position:absolute;
background: #222;
color: #fff;
list-style: none;
font-size: 1.2em;
bottom:0;
width: 100%;
}
and add this thing in ur css
并在你的 css 中添加这个东西
footer section
{
margin:10px 20px;
}
