How to Stop Down Arrow on Scroll Bar from going off screen on page resize with CSS

Question

I'm trying to add a box on a web page that stays on screen at all times. The HTML looks like this:

<div class="mySideBar"> <!-- Some text and other elements --> </div>

The styles being applied look like this:

.mySideBar { position: fixed; width: 20%; height: 80%; overflow-y: scroll; }

That works nicely until I re-size my window then the down button on the scroll bar disappears offscreen and underneath my footer. The Footer HTML looks like this:

<div class="myFooter"> <!-- Some text and other elements --> </div>

The CSS looks like this:

.myFooter { position: fixed; width: 100%; height: 24px; overflow-y: scroll; }

I've tried playing with position relative and a few other things but I can't seem to get it right. It needs to work in IE7 too unfortunately and I'm afraid I can only post obfuscated snippets that display my problem. Is there something I've obviously missed?

Answer 1

I found an answer myself after I went away and came back to it today. Sorry I didn't get back to those that left comments but I couldn't get online. If you use bottom with a value set to 24px, the height of the footer, the overflow scroll bar will stay put.