CSS overflow scrollbar is positioned wrong when bottom CSS attribute is set

I have a div that has a footer image taking up 26px of space. The CSS is set to d开发者_如何学Cisplay a vertical scrollbar when needed, however I need to make sure the scrollbar doesn't overlap into my footer area, so I use bottom:26px; to bring it up. When that happens though the scrollbar is shifted upwards and I can't see the top of the content or the top arrow of the scrollbar. I am not sure what to change for the css to fix it so the scrollbar is at the very top, and leaves a 26px spacing at the bottom for my image. Any help is appreciated.

HTML

<div id="channel-container">
<div id="channel">

</div></div>

CSS

#channel {
color: #FFFFFF;
text-align: left;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
bottom: 26px;
}
#channel-container {
float: right;
width: 31%;
height: 100%;
}

Think about restructuring your html. If the div is supposed to scroll, but the footer is not then I wouldn't group them together. Set margin/padding to 0 on footer and same for bottom of scrollablediv. They should seamlessly mash together. Also obviates the need for using position absolute and a bottom value.

Here is a fiddle of what I think you are after. http://jsfiddle.net/vdZ6R/

<div id="container">
  <div id="scrollablediv"></div>
  <div id="footer"><img src="" /></div>
</div>