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，则可以看到红色“色带”的左边扩展位于视口之外，并且无法使用水平scollbar向内滚动。

我希望在右边缘扩展上获得相同的效果（溢出白色区域），但是它会推动可滚动区域的右边缘并使其自身可滚动。

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

Answer 1

好的，我在这个帖子中找到了一个对我来说很好的解决方案：https://stackoverflow.com/a/2650215/2084434（Nikolaos Dimopoulos回答）

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

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

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

功能区标题没有扩展滚动区域

1 个答案: