Я хотел бы иметь маленький красный div с полной шириной в фиксированной верхней позиции, внутри другого div, который имеетoverflow: scroll, Я надеюсь, что jsFiddle дает понять:http://jsfiddle.net/mCYLm/2/.

Проблема в том, что красный div перекрывает полосу прокрутки. Похожеright: 0 означает правую частьdiv.wrapper; это не вычитает полосу прокруткиdiv.main, Когда я двигаюoverflow: scroll вdiv.wrapperтогда красное знамя имеет нужный размер (играть на скрипке). Однако он больше не находится в фиксированном положении (прокрутка вниз заставляет баннер прокручиваться вверх).

Как я могу достичь следующих двух вещей вместе?

The red banner is at the fixed position like in this fiddle. The red banner has full width except the scrollbar like in this fiddle.

Мне бы хотелось, чтобы это работало в 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;
}