Use largura total, excluindo a barra de rolagem de estouro com “position: absolute”
Eu gostaria de ter um pequeno div vermelho com largura total em uma posição fixa superior, dentro de outro div que temoverflow: scroll
. Espero que o jsFiddle deixe claro:http://jsfiddle.net/mCYLm/2/.
A questão é que o div vermelho está sobreposto à barra de rolagem. eu achoright: 0
significa o lado direito dadiv.wrapper
; ele não subtrai a barra de rolagemdiv.main
. Quando eu movo ooverflow: scroll
para dentrodiv.wrapper
, então o banner vermelho tem o tamanho certo (violino). No entanto, não está mais em uma posição fixa (a rolagem para baixo faz com que o banner role para cima).
Como posso conseguir as duas coisas seguintes juntas?
O banner vermelho está na posição fixa, como emeste violino.O banner vermelho tem largura total, exceto a barra de rolagem como emeste violino.Eu gostaria de fazer isso funcionar no 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;
}