Scrolling a portion of content in a fixed-position container

Question

I have a div position: fixed in the layout, like a sidebar. I was suggested that part of its contents remain fixed to the top (internally), and the rest scrolls if it overflows the bottom of the div.

I looked at this answer , however the solution presented there does not work with position: fixed or position: absolute containers, which is a pain.

I did a JSFiddle demo of my problem here . A large amount of text should ideally scroll, and not overflow at the bottom of the page. The height of the title can vary depending on the content and can be animated.

Sample JSFiddle code:

CSS

 div.sidebar { padding: 10px; border: 1px solid #ccc; background: #fff; position: fixed; top: 10px; left: 10px; bottom: 10px; width: 280px; } div#fixed { background: #76a7dc; padding-bottom: 10px; color: #fff; } div#scrollable { overlow-y: scroll; } 

HTML:

 <div class="sidebar"> <div id="fixed"> Fixed content here, can be of varying height using jQuery $.animate() </div> <div id="scrollable"> Potentially long content </div> </div>​ 

Without a fixed header, I can simply add overflow-y: scroll to div.sidebar , and I can happily scroll through all the content if it overflows the bottom of the container. However, I am having problems with having a fixed, variable-height header at the top of the sidebar and having any content under this scroll if it is too long to fit into the container.

div.sidebar should remain position: fixed , and I would really like to do it without any hacks, and also make it as convenient as possible. I tried to do different things, but none of them work, and I'm not sure where from here.

How can I make the div inside the position: fixed container scroll only in the Y direction when the content overflows the containing div, with a fixed variable header of undefined height? I would love to stay away from JS, but if I have to use it, I will.

Answer 1

It seems that if you use

 div#scrollable { overflow-y: scroll; height: 100%; } 

and add padding-bottom: 60px to div.sidebar .

For example: http://jsfiddle.net/AKL35/6/

However, I'm not sure why this should be 60px .

Also, you missed f from overflow-y: scroll;

Answer 2

I changed the scrollable div to an absolute position and everything works for me

 div.sidebar { overflow: hidden; background-color: green; padding: 5px; position: fixed; right: 20px; width: 40%; top: 30px; padding: 20px; bottom: 30%; } div#fixed { background: #76a7dc; color: #fff; height: 30px; } div#scrollable { overflow-y: scroll; background: lightblue; position: absolute; top:55px; left:20px; right:20px; bottom:10px; } 

DEMO with two scrollable divs

Answer 3

This is actually the best way to do this. If height: 100% , the content leaves the border, but when it is 95% everything is fine:

 div#scrollable { overflow-y: scroll; height: 95%; } 

Answer 4

Set the scrollable div to max-size and add overflow-y: scroll; to him.

Edit: An attempt to get jsfiddle to work, but not scrolling correctly. It will take some time to understand.