Use full width excluding overflow scrollbar with “position: absolute”

Question

I would like to have a small red div with full width at a fixed top position, inside another div that has overflow: scroll. I hope the jsFiddle makes it clear:

Answer 1

Seems like this isn't possible with pure CSS, so here's a 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();
});

then:

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

Development version: http://jsfiddle.net/mCYLm/13/
Final version: http://jsfiddle.net/mCYLm/14/

Works with zooming and variable viewport width.
! BUG: Scrollbar button from the right top is not accessable/clickable.

Tested in:

• IE6,7,8,9 (windows)
• FF11 (Windows)
• Google Chrome 18 (ubuntu)
• Safari 5.1 (OSX)