css - 将页脚的宽度设置为 100% 会显示一个滚动条

Question

虽然我将页脚的宽度设置为 100%，但它扩展到超过 100%，并且在宽度方面有一个滚动条。任何想法为什么？我知道问题出在宽度上，因为当我删除 100% 时，它不显示滚动条。该页面被分解为正文>包装>页脚这是我的代码:

 #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 的滚动条。