I have a fixed sidebar on the left of my site with content that has too much content to display on the screen. How can I make that content scrollable while still allowing the right side to be scrollable?
I think a simple overflow-y: scroll;
would suffice. I need to have a max-height
on the sidebar, but setting that max-height
to 100% does nothing. I'm sure this is a simple code pattern, but my CSS skills have deserted me today.
A simple example here: http://jsfiddle.net/tvysB/1/
Set the top
and bottom
to 0
, so that the sidebar is exactly the same height as the viewport:
#leftCol {
position: fixed;
width: 150px;
overflow-y: scroll;
top: 0;
bottom: 0;
}
Here's your fiddle: http://jsfiddle.net/tvysB/2/