宽度：100％没有滚动条

Question

我试图使我的网页的一部分适合浏览器的宽度，为此我使用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;
}

Answer 1

因为您使用的是position: absolute，而不是使用：

width: 100%; margin-right: 10px; margin-left: 10px

你应该使用：

left: 10px; right: 10px

这将使您的元素占据整个宽度，左侧和右侧有10px空间。

Answer 2

你必须删除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;
}

如果这不起作用，您可能在元素本身上设置了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;
}

Answer 3

您似乎已将宽度设置为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轴添加滚动条来中断布局。

Answer 4

我有一个绝对定位元素的类似问题，我想使用宽度100％。这是我使用的方法，它解决了我的问题：

box-sizing=border-box

否则我总是有一些内容和填充推过滚动条。

Answer 5

答案是你设置的边距将使div宽于100％;因此滚动条。

如果你能摆脱自己的利润就行了！但是，通常你会想要利润率。在这种情况下，将整个东西包装在容器div中，并将边距设置为0，宽度为100％。