CSS - Having a div fill the remaining vertical space

CSS - Having a div fill the remaining vertical space

Please see a demonstration here: http://puu.sh/3YwRt.png
JSFiddle: http://jsfiddle.net/elvista/7LBcr/2/
I am trying to make an outlook.com like chat in the sidebar.
I have managed to reverse engineer some of the codes from outlook.com and
make a chat window similar to it. However I have a limitation that site
does not have. I do not know the exact top value of the #chathistory
because I might have one or more .widget with variable heights placed on
top of the #chathistory.
Essentially, I have this code:
#chathistory {
overflow-y: auto;
bottom: 60px;
top: 70px;
position: absolute;
}
And I need it to function without the top:value.
Can it be done with CSS or do I need jQuery? If the latter can I have some
guidance on how to since my jQuery skills are minimal at best please?
Thanks.