up vote 1 down vote favorite
share [fb]

I have a div that has a footer image taking up 26px of space. The CSS is set to display 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%;
}
link|improve this question
91% accept rate
feedback

1 Answer

up vote 1 down vote

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>
link|improve this answer
That would work, but I need the scrollable div to have a height of 100% minus the footer size (26px) so it will be fluid if the user resizes their browser. – Ed R Sep 8 '11 at 17:04
I don't really understand what you want. Can you post a picture? – mrtsherman Sep 8 '11 at 17:24
img694.imageshack.us/img694/5341/100percentexample.png the right side, the jQuery buttons "Channel, Friends, Clan" are my footer. The netire area above it the scrollable section. It needs to be the height of the browser minus those 26px at the bottom. So it will scroll at 100% minus those 26px (from the bottom) no matter what size the browser is. Does that help clear things up? I'll try to explain better if need be. – Ed R Sep 9 '11 at 4:41
I still don't understand what you are saying - but this looks like you just need to use a fixed element. jsfiddle.net/HxxfP – mrtsherman Sep 9 '11 at 5:04
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.