试图使页脚背景(而不是图像)溢出浏览器宽度的div，但并没有滚动条

Question

所以在这个网站上：http://istec.org我试图在页脚后面有一个浅绿色的背景，它适合浏览器的宽度，但没有滚动条。我目前使用的解决方案是：

.custom #footer-bg { /* wrapper for the footer */
  position: relative;
  background: rgb(0, 111, 111); 
}
.custom #footer-bg:before, .custom #footer-bg:after {
  content: "";
  position: absolute;
  background: rgb(0, 111, 111);  /* Matches the background of the footer's background */
  top: 0;
  bottom: 0;
  width: 1000px;
} 
.custom #footer-bg:before {
  right: 100%; 
}
.custom #footer-bg:after {
  left: 100%;
}

但这增加了水平滚动条。有没有办法去掉滚动条，但确保在浏览器大小小于内容时它们仍然显示？

Answer 1

我会考虑在div#page下面放一个footer元素，将其宽度设置为100%并赋予其背景色，并在其中嵌套与div#page宽度相同的div#footer。设置margin: auto ondiv#footer`使其位于页脚的中心。

这是标记：

<footer>
    <div id="footer">
        <!-- Your footer here -->
    </div>
</footer>

和CSS:

footer { 
    width: 100%; 
    background: rgb(0, 111, 111);
}
#footer { 
    width: 102.9em; 
    margin: auto;
}

更新：即使进行了这些更改，您仍然有一点水平滚动，但它与页脚无关。我可以删除页脚，滚动条仍然在那里，这意味着你的一个元素比页面更宽。