This only works if the page content is not bigger than the window.
Try it yourself or check it out at FixedFooter.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fixed Footer Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body, #container {
height: 100%;
margin: auto;
text-align: center;
}
#footer {
position:absolute;
bottom:0;
width:100%;
margin: auto;
height:60px;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>This is the main content</h1>
<p>If it is bigger than the window, then the footer will play over it.</p>
<p>The footer can be inside or outside of the container.</p>
</div>
<div id="footer">
<p>This is the footer content.</p>
</div>
</body>
</html>