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

Question

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.

Stoneware

Please post a jsfiddle with the html and css you are currently using so we can see the issue. Thanks! – Pantelleria

have you tried overflow: auto; ? – Nashner

Yes overflow:auto or overflow-y:scroll or overflow:scroll all don't allow the fixed div to scroll. – Stoneware

The reason for scrolling to be needed is if a div has TOO MUCH content in its defined lengths. If the browser view port shrinks that would not cause the div to force a scrolling action anyway. – Nashner

Can't post a JSfiddle and html/css because it's just waaay too long and they don't let you post a JSfiddle link without the code. :( I posted just the piece of code that doesn't seem to be helping the div scroll.. and the link to the entire thing. – Stoneware

Answer 1

The problem with using height:100% is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it

You can use fixed to accomplish what you're trying to do.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

This fork of your fiddle shows my fix: http://jsfiddle.net/strider820/84AsW/1/

Manchukuo

Worked. I needed this for an adaptation of a Codrops article. Some might need to use left and right set to 0 also. Thank a lot, luck – Emera

If you set "overflow-y" to auto, the scroll bar will disappear when the content is within the viewport. In other words, if it doesn't overflow, there will be no scroll bar and when it does overflow, there will be a scrollbar. – Plagal

Correct. I was just using his css and fixing what was truly broken. He seemed to already have the answer to that bit in his question, though. – Manchukuo

I don't want mine to be 100% high so I've taken out top: 0. Is the anyway to stop the 'background' content from scrolling when I'm trying to scroll the fixed content. That seems to be the biggest usability issue I have? – Strouse

worked! great solution. I still don't get the bottom:0 part.. could u explain pls?? – Barrier

Adding top:0 and bottom:0 while leaving out height in a position fixed element causes the browser to stretch the element to make the top be at 0 and the bottom be at 0. – Manchukuo

Answer 2

The solutions here didn't work for me as I'm styling react components.

What worked though for the sidebar was

.sidebar{
position: sticky;
top: 0;
}

Hope this helps someone.

Pendragon

I've been editing CSS for years and had no idea about the 'sticky position' attribute. Thanks for this, worked perfectly for my implementation also! – Forsooth

Lovely solution. Thank you! – Nephology

genius! I only know absolute, relative, & fixed. never know if there's sticky position. – Frendel

thanks ! it's been 2 hours I was searching about how to do it !! – Kaycekaycee

Thank you.... Simple to implement and exactly what I was looking for.... – Gesticulation

Much yes, this is next level. Thank you so much. – Telly

Answer 3

Generally speaking, fixed section should be set with width, height and top, bottom properties, otherwise it won't recognise its size and position.

If the used box is direct child for body and has neighbours, then it makes sense to check z-index and top, left properties, since they could overlap each other, which might affect your mouse hover while scrolling the content.

Here is the solution for a content box (a direct child of body tag) which is commonly used along with mobile navigation.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Hope it helps anybody. Thank you!

Skilling

Exactly what I needed. Thank you! – Polyp

Answer 4

Here are both fixes.

First, regarding the fixed sidebar, you need to give it a height for it to overflow:

HTML Code:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

CSS Code:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

Live example: http://jsfiddle.net/RWxGX/3/

It's impossible NOT to get a scroll bar if your content overflows the height of the div. That's why I've added a media query for screen height. Maybe you can adjust your styles for short screen sizes so the scroll doesn't need to appear.

Cheers, Ignacio

Rumery

See the JSFiddle example I posted. You will see the issue. – Stoneware

This doesn't work in older browsers, such as Mobile Safari for iOS 4.2 – Lazarolazaruk

Answer 5

Leaving an answer for anyone looking to do something similar but in a horizontal direction, like I wanted to.

Tweaking @strider820's answer like below will do the magic:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

That's it. Also check this comment where @train explained using overflow:auto over overflow:scroll.

Enrapture