使用全宽不包括溢出滚动条与“位置：绝对”(Use full width excluding over

我想有一个红色的小分度，全宽在一个固定的顶部位置，有另一个DIV中overflow: scroll 。我希望的jsfiddle清楚： http://jsfiddle.net/mCYLm/2/ 。

问题是，红色的DIV是重叠的滚动条。我想right: 0指的右手侧div.wrapper ; 它不减去的滚动条div.main 。当我移动overflow: scroll到div.wrapper ，那么红色横幅具有合适的尺寸（小提琴）。然而，它不是在一个固定的位置了（向下滚动，使旗帜向上滚动）。

我怎样才能实现以下两件事情一起？

红色横幅是在固定位置，就像在这个小提琴。
红色横幅具有最大宽度，除了像滚动条这个小提琴。

我想获得在谷歌浏览这方面的工作。

HTML：

<div class="wrapper">
    <div class="red-banner"></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>
</div>

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;
}

Answer 1:

看起来这是不可能的纯CSS，所以这里是一个JavaScript（jQuery的）黑客：

$(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
});

Answer 2:

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>

CSS

* { 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;
}

开发版： http://jsfiddle.net/mCYLm/13/
最后版本： http://jsfiddle.net/mCYLm/14/

可与缩放和可变视口宽度。
！ BUG：从右上角滚动按钮是不可访问，/点击。

经测试，在：