Usa la larghezza completa escludendo la barra di scorrimento con "posizione: assoluta"

Question

Mi piacerebbe avere un piccolo div rosso con larghezza completa in una posizione superiore fissa, all'interno di un altro div che ha overflow: scroll. Spero che jsFiddle chiarisca: http://jsfiddle.net/mCYLm/2/.

Il problema è che il div rosso si sovrappone alla barra di scorrimento. Immagino che right: 0 significhi il lato destro di div.wrapper; non sottrarre la barra di scorrimento di div.main. Quando sposto lo overflow: scroll in div.wrapper, il banner rosso ha le dimensioni corrette (fiddle). Tuttavia, non si trova più in una posizione fissa (lo scorrimento verso il basso fa scorrere il banner verso l'alto).

Come posso ottenere le seguenti due cose insieme?

• Il banner rosso è nella posizione fissa come in this fiddle.
• Il banner rosso ha una larghezza intera, ad eccezione della barra di scorrimento come in this fiddle.

Mi piacerebbe farlo funzionare su 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

Sembra che questo non sia possibile con CSS puro, quindi ecco un trucco 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(); 
}); 

poi:

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

versione di sviluppo: http://jsfiddle.net/mCYLm/13/
Versione finale: http://jsfiddle.net/mCYLm/14/

Funziona con zoom e larghezza viewport variabile.
! BUG: il pulsante della barra di scorrimento dalla parte superiore destra non è accessibile/selezionabile.

testato in:

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