hansspiess · August 8, 2012 20:38
diff --git a/fiddle.css b/fiddle.css
 * {
 	margin: 0;
 	padding: 0;
 }

 html, body, #wrap {
 	height: 100%;
 }

 body > #wrap {
 	height: auto;
 	min-height: 100%;
 }

 #main {
 	overflow: auto;
 	padding-bottom: 150px;
 }

 #footer {
 	position: relative;
 	margin-top: -150px;
 	height: 150px;
 	clear: both;
 	background-color: #909;
 }

 body:before {
 	content: "";
 	height: 100%;
 	float: left;
 	width: 0;
 	margin-top: -32767px;
 }
diff --git a/fiddle.html b/fiddle.html
 <html>
 <head>
 	<title>Sticky Footer</title>
 	<!--[if  IE 8]>
 		<style type="text/css">
 			#wrap { display: table; }
 		</style>
 	<![endif]-->
 </head>
 <body>

 	<div id="wrap">

 		<div id="main">
 			Hello!
 		</div>

 	</div>

 	<div id="footer">
 		Hello from below!
 	</div>

 </body>
 </html>