I just received a psd for a 100% height layout with a sticky footer, which you can see here! They wish to have a fixed height content div in the example left. The content div should have margins of 30px around top, bottom and left). I tried Paul O'bs method with a fixed div holding the background but I can't get the margin at the bottom to work. This is what I have:

HTML Code:
<!-- #wrapper -->
<div id="wrapper">
  <div id="header"></div>
  <div id="content">
  
  </div>
  <div class="col"></div>
</div><!-- #wrapper -->

<!-- #footer -->
<div id="footer">

</div><!-- #footer -->
Code:
html, body {
	width: 100%;
	height: 100%;
}

#wrapper {
	width: 100%;
	min-height: 100%;
	margin-top: -75px;
	position: relative;
	clear:both;
	z-index: 4;
	overflow: hidden;
	font-size: .8125em;
	background: ;	
}

* html #wrapper{
	height:100%;
}

#footer {
	width: 100%;
	min-height: 75px;
	position: relative;
	clear:both;
	z-index: 5;
	font-size: .8125em;
	background: url(../images/site/footer.png) 0 0;	
}

#wrapper #header {
	width: 100%;
	border-top: 75px solid #FFF;
}

#wrapper #content {
	width: 320px;
	position: fixed
	top: 60px
        left: 30px;
	z-index: 1;
}

.col {
	width:320px;
	height: 9999em;
	position: fixed;
	z-index:0;
	top: 60px;
	left: 30px;
	bottom:105px;
	background: url(../images/site/content.png);
}

html>body .col {
	top: 60px;
}
The bottom margin isn't there the content is going all the way down. What am I doing wrong or is this simply not the right approach?

Thank you in advance