I have a div
positioned fixed
on the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if the content is too much, the div
will be larger than the window's height, and part of the content will not be visible. (Scrolling the window doesn't help, since the position is fixed
and the div
won't scroll.)
I tried to set overflow-y:auto;
but that doesn't help either, the div doesn't seem to notice that part of it is outside of the window.
How can I make it's contents scrollable only, if needed, if the div
hangs out of the window?
You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.
http://jsfiddle.net/ThnLk/1289
.stuck {
position: fixed;
top: 10px;
left: 10px;
bottom: 10px;
width: 180px;
overflow-y: scroll;
}
You can do a percentage height as well:
http://jsfiddle.net/ThnLk/1287/
.stuck {
max-height: 100%;
}