Tu tienes:
<body>
<div id="page">
.....
</div>
<footer>....</footer>
</body>
Y yo haría
<body>
<div id="main-wrapper">
<div id="page">
.....
</div>
<footer>....</footer>
</div>
</body>
y definiria las css de #main-wrapper como:
div#main-wrapper {
position:relative;
height:100%;
width:100%;
}
y las de footer
footer {
position:absolute;
bottom:0;
width:100%;
// Y las que necesites
}