Adding auto scroll to a fixed element when browser is too small

[TrSplash]

I'm trying to give a fixed element a scroll bar only if the browser is too small to show all of its contents.I also have a fixed footer at the bottom of the page, and i would ideally like the scrolling to start once the contents of the fixed element go behind the footer.Here is a link to a simply example of my problem.http://jsfiddle.net/alsweeet/pGFzF/1/\[code\]<div id="container"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul></div> <div id="footer"></div>#container{ color: #fff; position: fixed; top: 200px; left: 0; width: 100%; background: red; overflow: auto;}#footer{ position: fixed; height: 50px; width: 100%; bottom: 0; left: 0; background: #000000;}\[/code\]The container is a certain distance from the top, so I can't simply give the height a percentage.I'm guessing this is quite a common issue, but I have never come accross it, and couldn't find the magic words to squeeze the answer out of google.Thanks in advance for any helpful advice.