Question

虽然我将页脚的宽度设置为100％，但在宽度方面有一个滚动条，它扩展到100％以上。有什么想法吗？我知道问题是宽度，因为当我删除100％时，它不会显示滚动条。该页面分为body＆gt; wrapper＆gt;页脚这是我的代码：

 #footer {
  margin-top: 30px;
  color: white !important;
  padding-bottom: 15px;
  background: black;
  text-align: center;
  padding: 20px;
  height: 40px;
  min-width: 1000px;
  width:100%;
  position:absolute;
  bottom:0;
}

还有身体css：

body {
  font: normal 12pt Georgia, serif;
  color: #111;
  background: #990000;
  margin: 0 auto;
  text-align: center;
  background-position: 50% 50%;
  min-height: 100%;

  margin:0;
    padding:0;
    height:100%;
}

包装器css：

#wrapper {
    min-height:100%;
    position:relative;
}

Answer 1

您在页脚的CSS中设置了填充。这增加了宽度并使其大于100％。这就是你看到滚动条的原因。

用以下以下行替换填充。

padding-top:20px;
padding-bottom:20px;

此外，通过将页脚div的最小宽度设置为1000px，您将在浏览器屏幕中获得比1000px更窄的滚动条。

Answer 2

这很可能是由于默认Box Model在html页面中的工作原理：在内容的宽度设置为100％之后，添加边框，边距和填充，将最终宽度增加到100％以上。

对于现代浏览器：冰雹盒大小！

使用原始代码查看this jsfiddle。
请this newer version设置为border-box box sizing（仅适用于较新的浏览器）。这个版本没有显示水平滚动条（我使最小宽度变得更小，或者它会在jsfiddle中抛出示例）。

适用于旧版浏览器

如果你想为旧浏览器修复此问题，你必须对CSS中的填充做一些事情。将其从页脚中移除，并在内部放置一个“页脚内容”div，其边距等于旧的填充。 E.g：

#footer { 
    /* padding: 20px; removed! */
}
#footer-content { 
    margin: 20px;
}

Answer 3

许多浏览器在BODY元素周围都有一个默认边距，这会增加宽度。

Answer 4

这是因为填充而发生的。请参阅问题图示here。

使用填充时，大小会分别添加到总高度和宽度。

删除填充将解决您的问题。 ^Demo

 #footer {
  margin-top: 30px;
  color: white !important;
  background: black;
  text-align: center;
  height: 40px;
  min-width: 1000px;
  width:100%;
  position:absolute;
  bottom:0;
}

另一个好的解决方案是让浏览器以不同的方式处理您的元素。使用box-sizing属性。

 #footer {
  /* Add box-sizing */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  margin-top: 30px;
  color: white !important;
  padding-bottom: 15px;
  background: black;
  text-align: center;
  padding: 20px;
  height: 40px;
  min-width: 1000px;
  width:100%;
  position:absolute;
  bottom:0;
}

Demo

Answer 5

只需在开始时为所有元素添加0填充，0边框和0边距。

* {
padding: 0;
border: 0;
margin: 0;
}

将我的页脚宽度设置为100％显示滚动条

5 个答案: