CSS - Height: 100% vs min-height: 100%; - height

Question

So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}

Answer 1

If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.