2

虽然我将页脚的宽度设置为 100%，但它在宽度方面延伸到 100% 以上，并且有一个滚动条。任何想法为什么？我知道问题是宽度，因为当我删除 100% 时，它不会显示滚动条。该页面被分解为 body>wrapper>footer 这是我的代码：

 #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;
}

还有body 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;
}
4

5 回答 5

4

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

用以下几行替换填充。

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

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

于 2012-10-01T05:24:37.067 回答
1

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

于 2012-10-01T05:25:30.657 回答
1

这很可能是由于默认盒子模型在 html 页面中的工作方式：在将内容的宽度设置为 100% 后，添加边框、边距和填充，最终宽度增加超过 100%。

对于现代浏览器：万岁盒子大小！

  1. 使用您的原始代码查看此 jsfiddle 。
  2. 请参阅此较新版本，并将框大小设置为border-box（仅适用于较新的浏览器）。这个版本不显示水平滚动条（我把最小宽度做得小了很多，否则它会抛出 jsfiddle 中的示例）。

对于旧版浏览器

如果你想为旧版浏览器解决这个问题，你必须对 CSS 中的填充做一些事情。将其从页脚中删除，并在其中放置一个“页脚内容” div，其边距等于您的旧填充。例如：

#footer { 
    /* padding: 20px; removed! */
}
#footer-content { 
    margin: 20px;
}
于 2012-10-01T05:24:14.387 回答
0

这是由于填充而发生的。请参阅此处的问题说明。

当您使用填充时，大小将分别添加到总高度和宽度中。

删除填充将解决您的问题。演示

 #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;
}

演示

于 2012-10-01T05:29:28.890 回答
0

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

* {
padding: 0;
border: 0;
margin: 0;
}
于 2016-06-14T18:07:20.940 回答