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

【问题标题】：How do I extend a div (or background) past the horizontal page boundaries, without having a horizontal scroll bar?如何在没有水平滚动条的情况下将 div（或背景）扩展到水平页面边界之外？
【发布时间】：2011-10-17 19:41:58
【问题描述】：

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

这是我目前所获得的链接，它看起来是我想要的方式，但有一个问题。

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

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

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

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

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

我 99.9% 确定我在某个地方看到过这项工作，但我不记得在哪里，对负边距/定位的顶部/左侧、底部/右侧规则的研究让我相信这可能行不通。有什么想法吗？

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

【问题讨论】：

标签： html css layout

【解决方案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/

【讨论】：

哇哦，这好多了，即使他们有一个 5000 像素宽的显示器，他们也无法看到栏的尽头。这正是我想要的，非常感谢。

【解决方案2】：

你期待这样吗 http://jsfiddle.net/pFDDV/6/

【讨论】：