宽背景css使用:before标记

Question

有人能帮我吗http://www.alerto24.com/为什么右边有一个很宽的空间，而水平滚动条是可见的？

Answer 1

页脚和内容部分都有-100%的右边距，这会导致出现滚动条。禁用这两个元素的CSS属性，滚动条就会消失。

Answer 2

请更改以下css

#content::before {
  background: rgba(0, 0, 0, 0) url("../images/site-bg-b.jpg") no-repeat scroll 50% 0;
  content: " ";
  /*left: -100%;
  position: absolute;
  right: -100%;
  top: 0;
  bottom: 0;
  z-index: -1;*/
}
#footer::before {
  background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
  border-top: 1px solid #032d34;
  content: " ";
  /*left: -100%;
  position: absolute;
  right: -100%;
  top: 0;
  bottom: 0;
  z-index: -1;*/

}

Answer 3

我认为您的#footer和#content存在结构问题。例如您将背景属性设置为在:before中应用100%背景，并在页脚元素中应用max-width: 920px和width: 100%组合，这看起来很矛盾。

我建议你进行以下修改：

您可以删除#content:before和#footer:before属性。您可以在#content元素中创建一个容器div，其中包含网站的宽度，如下所示：

#content .container { 
  width: 920px;
  margin: 0 auto;
}

您在具有width: 100%; 的#content上应用背景属性

#content {
  width: 100%;
  background: blue; /* you put your background properties on it */
}

此外，您对页脚执行相同操作：

#footer {
    position: relative;
    z-index: 1;
    width: 100%;
    /* max-width: 920px; remove this line */
    background: blue; /* you put your background properties on it */
    margin: 0 auto;
    padding: 30px 0 15px;
    color: #fff;
}
#footer .wrap {
    position: relative;
    margin: auto; /* you use this property to center this container as it is on the website */
    padding: 0 0 50px;
    font-size: 0;
    width: 920px; /* you apply width on this container instead of the #footer container */
    letter-spacing: -5px;
}

编辑：我制作了一个JSFiddle来解释我的想法点击此处查看