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

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/

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.

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!

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

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.