Question

我正在努力使我的网页的一部分符合浏览器的宽度，为此我使用width: 100%，问题是它显示了滚动条而我无法使用{{1因为它会隐藏一些内容，所以我该如何解决这个问题呢？

overflow-x: hidden;

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％，但也有一些边距会强制宽度超出该宽度。

尝试使用Google搜索“css flexible（two / three-collumn）布局”。

这是一个例子，

<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结束。< / p>

我们不能将#main设置为百分比宽度（例如100%），因为左边填充的200个像素将添加到其中，并通过向X轴添加滚动条来中断布局

Answer 4

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

box-sizing=border-box

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

Answer 5

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

如果你能摆脱利润，那就去吧！但是，通常你会想要利润。在这种情况下，将整个事物包装在容器div中，并将边距设置为0，宽度为100％。

宽度：100％没有滚动条

5 个答案: