css - 滚动时背景不显示在 100% 宽度的 div 上

Question

我有一个页眉 100% 并且应该有一个 background-color。然后我将我的内容 div 居中并沿宽度放置一个额外的 div 到右侧用于广告。

当缩小窗口以便所有内容 + 广告都不会显示时，我有一个水平滚动条，效果很好，除了标题为视口(viewport)外的部分丢失了 background-color .怎么才能让background-color一直运行呢？

一个简单的解决方案是在 body 上设置顶部 background-color，但我们希望在未来的页脚上采用相同的设计。由于浏览器支持问题，我们无法使用多个背景。

示例页面:http://niklasholmberg.se/test.html

Answer 1

正如其他人指出的那样，这里的问题是您的“右”列脱离了正常流程，因此实际上不是“页面”的一部分。浏览器(IMO)没有将背景一直绘制到“头部”的右侧是正确的......但是(IMO)错误甚至允许您在页面边界之外滚动查看正确的列。

如果你将 boby 的溢出设置为隐藏，你就解决了背景问题......但是当然你不会那样让广告商高兴:)

建议

也许这足以满足您的需求:

        #fakebg {
        position:absolute;
        top:0;
        width:1102px;
        background:#000;
        margin:0;
        z-index:-1;
    }

http://jsfiddle.net/Mfsx6/1/

总结:我在头部添加了一个虚拟 div，其偏移位置与右列相同。这为我们提供了一个可以添加背景的表面。