Css 使用带“溢出”的全宽滚动条；位置：绝对“；

我想在一个固定的顶部位置有一个全宽的红色小div，在另一个有

溢出：滚动
的div内。我希望JSFIDLE能清楚地说明：

问题是红色div与滚动条重叠。我猜
right:0
表示
div.wrapper
的右侧；它不会减去
div.main
的滚动条。当我将
溢出：滚动到
div.wrapper
中时，红色横幅的大小合适（）。但是，它不再位于固定位置（向下滚动会使横幅向上滚动）

我怎样才能同时做到以下两件事


红旗位于固定位置，如中所示
除了滚动条（如中所示）外，红色横幅具有全宽

我想让它在谷歌浏览器上运行

HTML:

HTML

<div class="scroller">
    <div class="banner-wrapper">
        <div class="banner"></div>
    </div>
</div>

<div class="main">
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
</div>​

开发版本：

最终版本：

可用于缩放和可变视口宽度。

！错误：右上角的滚动条按钮不可访问/单击

测试地点：


IE6,7,8,9（windows）
FF11（窗口）
谷歌Chrome18（ubuntu）
Safari 5.1（OSX）
纯CSS似乎不可能做到这一点，因此这里有一个JavaScript（jQuery）黑客：

非常感谢，但是文本现在与横幅重叠。这个想法是横幅与文本重叠（就像小提琴一样）。您知道这是否可行吗？这并不能解决问题，它只是将滚动的元素放在条上。@pimvdb所以最后CSS唯一的解决方案：。我现在将用新的信息编辑我的答案，告诉你如何使用它。您可能需要根据需要替换DataURI。是的，谢谢！我使用的是
-webkit gradient
，如果我将其插入到您的代码中，效果会非常好：。它确实需要硬编码横幅的宽度，但是哦，好吧。@pimvdb酷！这让我很高兴！它也可以使用可变宽度，我明天可能会发现。不需要使用
calc
，只需将
设置为right
，
设置为right:SCROLLBAR\u WIDTH+“px”
@Qtax:Woops，我一定看了太久了。谢谢@两者：我接受了这个答案，因为这是唯一没有副作用的解决方案。我比你们两个都投了更高的票；谢谢你的帮助。为什么不把滚动的元素放在条下面呢？喜欢这是我看到的唯一可以做到这一点的简单方法。在我的实际应用程序中，我有一个从白色到透明的渐变，而不是红色，这样对从容器中滚动出来的文本有很好的效果。不幸的是，这种方式不可能产生这种效果，因为横幅/容器是分开的。@pimvdb，我明白了，我猜你会遇到麻烦（如果你想避免JS）。也许你可以使用Chrome支持的样式化CSS滚动条，这至少会给你一个固定的宽度。或者可能有一些不错的CSS3破解。您可以更改
right
属性以匹配滚动条宽度。。。需要JS确保任何滚动条都能正确测量。@Gaby aka G.Petrioli:是的，这很有效，谢谢。不过，这不是很令人满意。如果没有任何CSS的答案，我会继续这样做。
div.wrapper {
    position: relative;
}

div.main {
    height: 200px;
    overflow-y: scroll;
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.red-banner {
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 20px;
}

<div class="scroller">
    <div class="banner-wrapper">
        <div class="banner"></div>
    </div>
</div>

<div class="main">
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
</div>​

* { margin: 0; padding: 0 }
body {
    padding-top: 30px;
}

div.main {
    height: 200px;
    width: 100%;
    overflow-y: scroll;
    position: absolute;
    z-index: 50;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.scroller {
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 100;
    overflow: hidden;
}

div.banner-wrapper {
    background: transparent;
    position: relative;
    height: 20px;
    overflow-y: scroll;
    left: 0;
    margin-right: -20px;
}
div.banner {
    height: 20px;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));;
    margin-left: 20px;
    margin-right: 40px;
}

$(function() {
  var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body");
  var $child = $("<div>").css({ height: 2 }).appendTo($container);
  window.SCROLLBAR_WIDTH = $container.width() - $child.width();
  $container.remove();
});

$("div.red-banner").css({
  right: SCROLLBAR_WIDTH
});