使用全长,不包括溢出滚动条和"position:absolute"

Question

我想在一个固定的顶部位置有一个小红色div,全宽,在另一个div里面overflow: scroll.我希望jsFiddle明确表达:http://jsfiddle.net/mCYLm/2/.

问题是红色div与滚动条重叠.我想这right: 0意味着右手边div.wrapper; 它不会减去滚动条div.main.当我overflow: scroll进入时div.wrapper,红色横幅具有正确的尺寸(小提琴).但是,它不再处于固定位置(向下滚动使横幅向上滚动).

我怎样才能一起完成以下两件事？

• 红色横幅就像这个小提琴一样处于固定位置.
• 红色横幅的宽度除了滚动条之外,就像这个小提琴一样.

我想在Google Chrome中使用它.

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)hack:

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