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

then:

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