不扩展滚动区域的功能区标题

Question

我正在实现一个简单的带状标题，它扩展到内容区域（左右两侧），显示带有图像背景的3d效果（没有css3技巧）。

我尝试了浮动、负边距，最后是相对定位，但我的问题是，我尝试的所有解决方案都增加了内容的可滚动宽度（向右扩展）。我想保留我的功能区作为"背景效果"，保持内容的滚动宽度。

查看我的简化工作示例：http://jsfiddle.net/c5cVG/16/

body {
    background: blue;
}
body>div {
    width: 200px;
    margin: 0 auto;
    background: white;
}
body>div>p {
    padding: 5px;
}
body>div>h2 {
    overflow: hidden;
    padding: 10px 20px 5px;
    background: red;
    width: 190px;
    left: -15px;
    position: relative; 
}

如果将视口宽度设置为低于215px，则可以看到红色"丝带"的左边缘延伸位于视口之外，并且无法使用水平滚动条在内部滚动。

我想在右边缘扩展（溢出白色区域）上获得同样的效果，但它推动了可滚动区域的右边缘，使自己可以滚动。

任何帮助或演示都将不胜感激。

Answer 1

好吧，我在这个线程中找到了一个看起来不错的解决方案：https://stackoverflow.com/a/2650215/2084434（Nikolaos Dimopoulos回答）

将整个内容封装在另一个div中并应用

#wrapper {
    width: 100%;
    overflow: hidden;
    min-width: 200px;
}

工作正常。这是最新的小提琴：http://jsfiddle.net/jJaxp/2/