high div breaks sticky footer

[djsyzmik]

I'm working on a site with a sticky footer. Recently I added a shopping cart preview functionality to the navigation. Basically on mouseover a div opens up to show the items inside the shopping card. Nothing special actually.The problem occurs first when the item list becomes very long. The div containing the items somehow breaks the sticky footer.To demonstrate the behaviour I've made a jsFiddle example.My HTML looks like this:\[code\]<div id = "main"> <div id = "navigation"> navigation <div id = "cart"> cart <div id = "cartItems"> <p>item 1</p> <p>item 2</p> <p>item 3</p> <p>...</p> </div> </div> </div> <div id = "content">content</div> <div id = "footer">footer</div></div>\[/code\]CSS:\[code\]* { margin:0; padding:0;}html, body { height: 100%;}#main { width: 900px; min-height: 100%; margin: 0 auto; position: relative; background-color: lightpink;}#navigation { height: 50px; position: relative; background-color: orange;}#content { padding-bottom: 50px;}#footer { width: 900px; height: 50px; position: absolute; bottom: 0; background-color: yellowgreen;}#cart { width: 100px; position: absolute; top: 0; right: 0; background-color: red;}#cartItems { display: none;}\[/code\]I hope, somebody can give me a hint. I'm really stuck on this one.