html - 试图使页脚背景（不是图像）溢出 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

我会考虑在footer下面放置一个元素div#page，将其宽度设置为 100% 并为其赋予背景颜色，并div#footer以与div#page. 设置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;
}

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