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

Question

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%;
}

mrtsherman · Accepted Answer · 2011-09-08 05:56:13Z

1

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>

answered Sep 8, 2011 at 5:56

mrtsherman

39.9k23 gold badges89 silver badges111 bronze badges

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
– Ed R

09/08/2011 17:04:00
Commented Sep 8, 2011 at 17:04
I don't really understand what you want. Can you post a picture?

mrtsherman
– mrtsherman

09/08/2011 17:24:34
Commented Sep 8, 2011 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
– Ed R

09/09/2011 04:41:44
Commented Sep 9, 2011 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
– mrtsherman

09/09/2011 05:04:36
Commented Sep 9, 2011 at 5:04

Add a comment |

Collectives™ on Stack Overflow

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

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related