CSS 宽度：100% 无滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6317215/
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
Width: 100% Without Scrollbars
提问by Nathan Campos
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden;because it will make some of the content hidden, so how I can fix this?
我正在尝试制作适合浏览器宽度的网页的一部分，为此我正在使用width: 100%，问题是它显示滚动条而我无法使用，overflow-x: hidden;因为它会使某些内容隐藏，所以我该如何解决这个问题？
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
回答by thirtydot
Because you're using position: absolute, instead of using:
因为您使用的是position: absolute, 而不是使用：
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
你应该使用：
left: 10px; right: 10px
That will make your element take the full width available, with 10pxspace on the left and right.
这将使您的元素采用可用的全宽，左右各有10px空间。
回答by Jason Gennaro
You have to remove the marginson the #newsitem
你要删除margins的#news项
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have marginand paddingset on the element itself. Your div- if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0and add !importantas well.
如果这不起作用，您可能会在元素本身上设置margin和padding设置。您的div- 如果这是您正在使用的 - 可能在您的样式表或基本浏览器样式中应用了样式。要删除这些，请专门设置边距0并添加!important。
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
回答by Michael Sefranek
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
我有一个与绝对定位元素类似的问题，我想使用宽度 100%。这是我使用的方法，它解决了我的问题：
box-sizing=border-box
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
否则我总是有一些内容和填充超过滚动条。
回答by Pantelis
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
似乎您已将宽度设置为 100%，但也有边距迫使宽度超出此范围。
Try googling for "css flexible ( two/three-collumn) layouts".
尝试谷歌搜索“css灵活（两列/三列）布局”。
Here's an example,
这是一个例子，
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
和 CSS
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding(can also be margin) its content and child elements will start - where #menuends.
的#menu div，将被左对齐，并有一个静态的宽度200px。的#main div，将“开始”下方#main，但由于它的200px padding（也可以是保证金）其内容和子元素将开始-在那里#menu结束。
We must not set #mainto a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
我们不能设置#main百分比宽度，（例如100%），因为 200 像素的左填充将添加到其中，并通过向 X 轴添加滚动条来破坏布局。
回答by natedavisolds
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
答案是您设置的边距将使 div 比 100% 更宽；因此滚动条。
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.
如果你能摆脱边缘，那就去做吧！但是，通常您会想要边距。在这种情况下，将整个内容包装在容器 div 中，并将边距设置为 0，宽度为 100%。
