Usar ancho completo excluyendo la barra de desplazamiento de desbordamiento con "posición: absoluta"

Question

Me gustaría tener un pequeño div rojo con ancho completo en una posición superior fija, dentro de otro div que tiene overflow: scroll. Espero que jsFiddle lo aclare: http://jsfiddle.net/mCYLm/2/.

El problema es que el div rojo se superpone a la barra de desplazamiento. Supongo que right: 0 significa el lado derecho de div.wrapper; no resta la barra de desplazamiento de div.main. Cuando muevo el overflow: scroll en div.wrapper, el banner rojo tiene el tamaño correcto (fiddle). Sin embargo, ya no está en una posición fija (desplazarse hacia abajo hace que la pancarta se desplace hacia arriba).

¿Cómo puedo lograr las siguientes dos cosas juntas?

• El cartel rojo está en la posición fija como en this fiddle.
• El banner rojo tiene ancho completo excepto la barra de desplazamiento como en this fiddle.

Me gustaría hacer que esto funcione en 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

Parece que esto no es posible con CSS puro, así que aquí hay un truco de 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(); 
}); 

a continuación:

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

Versión de desarrollo: http://jsfiddle.net/mCYLm/13/
versión final: http://jsfiddle.net/mCYLm/14/

Funciona con el zoom y el ancho de visualización variable.
! ERROR: El botón de la barra de desplazamiento de la parte superior derecha no es accesible/seleccionable.

Probado en:

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