Her er et forsøg, det er noget jeg har fundet som ser ud til at det er det du søger.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en" xmlns="
http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Footer at the bottom of the viewport</title>
<style type="text/css">
html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
html>body #wrapper {
height: auto;
}
html {
background-color: #fff;
}
body {
font: 100% verdana, helvetica, sans-serif;
background-color: gray;
color: #333;
position: relative;
width: 80%;
margin: 0 auto;
outline: 1px dotted red;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
}
#main {
height: auto;
padding: .5em;
padding-bottom: 3em;
background-color: #fee;
}
#pageheader {
border: 0 none;
display: table;
width: 60%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background-color: #eef;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="pageheader">
<span class="light">html and css playpen</span>
<hr />
</div>
<h1>Lock the footer to the bottom of viewport</h1>
<p>The footer will sit at the bottom of the viewport unless the content pushes it down.</p>
<p>Put your whole page in #main, everything except the footer.</p>
<!-- uncomment the following to see long content -->
<!--
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
-->
</div><!-- end main -->
<div id="footer">
<p>Put your footer stuff here.</p>
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
