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.
How to Stop Down Arrow on Scroll Bar from going off screen on page resize with CSS
-
29-06-2022 - |
Вопрос
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?
Решение
Не связан с StackOverflow