I found a good way to do this with a variable height. Giving the menu position:absolute;
instead of float
you can anchor it with either top:0;
or bottom:0;
. Setting height:100%
restricts the menu to window height and overflow:scroll
lets you see what gets cut off. Everything else can be set to overflow:hidden;
#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
background: red;
}
#menu {
width: 200px;
background: blue;
position: absolute;
overflow: scroll;
top: 0px;
height: 100%;
padding-top: 10px;
}