我正在尝试制作适合浏览器宽度的网页的一部分，为此我使用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;
}
【问题讨论】：
我对绝对定位元素也有类似的问题，我想使用 100% 的宽度。这是我使用的方法，它解决了我的问题：
box-sizing=border-box
否则，我总是有一些内容和填充推过滚动条。
【讨论】：
您似乎已将宽度设置为 100%，但也有一些边距迫使宽度超出该范围。
尝试在谷歌上搜索“css 灵活（两列/三列）布局”。
这是一个例子，
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
和css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
#menu div 将左对齐并具有200px 的静态宽度。
#main div 将在 #main 下方“开始”，但由于它是 200px padding（也可以是边距），它的内容和子元素将开始 - #menu 结束的地方。
我们不能将#main 设置为百分比宽度（例如100%），因为这会添加 200 像素的左侧填充，并通过在 X 轴上添加滚动条来破坏布局。
【讨论】：
您必须删除 #news 项目上的 margins
#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;
}
如果这不起作用，您可能在元素本身上设置了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;
}
【讨论】：
因为你使用的是position: absolute，而不是使用：
width: 100%; margin-right: 10px; margin-left: 10px
你应该使用：
left: 10px; right: 10px
这将使您的元素占据可用的全部宽度，左右两侧有10px 空格。
【讨论】：
答案是您设置的边距会使 div 比 100% 更宽；因此滚动条。
如果你能摆脱利润，那就去做吧！但是，您通常会想要利润。在这种情况下，将整个内容包装在一个容器 div 中，并将边距设置为 0，宽度为 100%。
【讨论】：