如何在没有水平滚动条的情况下将 div（或背景）扩展到水平页面边界之外？

Question

我正在尝试设置一个页面，以便导航栏的背景水平延伸超过窗口边缘，但页面的实际内容保留在 960px 宽的容器内。

这是我到目前为止所得到的链接，它看起来像我想要的那样，但有一个问题。

http://jsfiddle.net/pFDDV/3/

问题是页面仍然会水平滚动到右侧过度扩展的 div 的末尾。它没有向左的问题，只有向右的问题（我认为这是由于元素处理负边距/定位的方式造成的）。我想我也许可以摆脱：

body {
    width: 100%;
    overflow-x: hidden;
}

它隐藏了底部滚动条，但您仍然可以使用箭头键向右滚动，如果您将页面大小调整为小于实际内容的 960px，则不会得到像你应该的那样水平滚动条。

有什么方法可以让页面忽略那个 div 的宽度吗？

我 99.9% 确定我在某处看到过这个工作，但我不记得在哪里，并且对负边距/定位的上/左、下/右规则的研究使我相信这可能行不通。有什么想法吗？

另外：我知道我可以使用重复的背景图像来做到这一点，但我试图避免使用图像。

Answer 1

您可以使用 position:absolute &像这样写：

#mWrapper {
    background: none repeat scroll 0 0 red;
    height: 30px;
    left: 0;
    position: absolute;
    right: 0;
}

检查这个 http://jsfiddle.net/sandeep/pFDDV/5/

Answer 2

你是否也这样期待
http://jsfiddle.net/pFDDV/6/