0

This is partially a copy of: Scroll part of content in fixed position container but with some more restrictions and the fact that question was never adequately answered anyway.

I have a fixed position sidebar that is 100% height (I suppose it could be absolute position with top 0 bottom 0)

There are a number of elements that take up the first part of the sidebar and then tabs for user content (essentially and area where users can save links to). The elements in the first part of the sidebar can be added and removed so the vertical starting position of the user content is variable. The user content itself could contain any number of links within the tab content and as such the tab content could take up more height than the rest of the sidebar. When it does this I would like a scrollbar to appear in the tab content area to scroll through all the links.

A demo page can be seen here: http://protobrewui.meteor.com/

A very close analogy is the same thing that Google does in gmail as shown in the image below.

Gmail

Google may do it with javascript or pure css. A pure CSS solution would be preferable but javascript is a valid option for me too.

Some more info:

  • I don't want the whole sidebar to scroll, only the tab content if it overflows the page
  • If I have to not have variable elements above the tab content I may be able to live with that.
  • the tab content should be able to take up the whatever height remains in the browser window before scrolling so giving the tab content a fixed height isn't quite what im looking for
Community
  • 1
  • 1
funkyeah
  • 3,074
  • 5
  • 28
  • 47

1 Answers1

1

you can wrap the list in a div and set the height and add overflow: auto;

small demo

edit: demo updated

Borian
  • 622
  • 10
  • 19
  • to clarify the links in the tab content should be able to use up 100% of the remaining browser height as in the gmail example. If you set the height on the above to 100% this solution doesn't work. – funkyeah May 02 '13 at 04:33
  • it should if you also set a height on the parent div, see updated demo – Borian May 02 '13 at 11:20
  • ok, i think i got it, the jsfiddle iframe threw me for a loop. I was looking at the demo and kept thinking this doesn't go to the bottom of the browser (so its not height 100%) but it is going to the bottom of the iframe correct so it would work in my case too? – funkyeah May 03 '13 at 06:00
  • if you set the parent div to 100%, yes (in my demo the `#wrap` div is set to `height:300px;`) – Borian May 03 '13 at 12:10