Have a fixed position div that needs to scroll if content overflows

by

I have actually two issues, but lets resolve the primary issue first as I believe the other is easier to address.

I have a fixed position div on the left side of the scroll for a menu. Right side is a standard div that scrolls properly. The issue is that when the browser view-port is too small to see the entire menu.. there is no way to get it to scroll that I can find (at least not with css). I’ve tried using different overflows in css, but nothing makes the div scroll. The div that contains the menu is set to min-height:100% and position:fixed.. both attributes I need to keep.

The div containing the menu is inside another wrapper div that is positioned absolutely and height set to 100%.

How can I get it to scroll vertically if the content is too tall for the div?

That leads me to the other issue, that i don’t want a scroll bar to display.. but I think I may already have an answer to that (only it doesn’t work yet because I can’t get the div to scroll to begin with).

Any solutions? Perhaps javascript is needed? (of which i know little about)

JS Fiddle Example

and the relevant code that is causing the issue (since posting the whole thing in here is waaay too long):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Also tried adding height:100% as well just to see if that was an issue but it didn’t work either… nor did a fixed height, such as 600px.

5 Answers
5

Leave a Comment