功能區標題沒有擴展滾動區域

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

OK，我發現了一個解決方案，看起來不錯，我在這個線程：https://stackoverflow.com/a/2650215/2084434（由尼可拉斯季莫普洛斯答案）

結束語在另一個DIV的全部內容和應用

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

工程確定。 這是更新的小提琴：http://jsfiddle.net/jJaxp/2/