Padding not working with child div on 100% height?

[thisisatest]

Hey. I can't seem to have bottom-padding for a parent div which has a child div with 100% height. So i've tried to have a 20px-tall "spacer" div below it, but as you can see in the link below, i was unsuccessful..

http://tinyurl.com/6yuvvxl

Here's the code:

<div id="banner"></div>
<div id="menu"></div>
<div id="wrapper"><img src="bg.jpg" name="bg" class="bg" id="bg">
	<div id="blackbox">
    	sdfdgdfg
    </div>
    <div id="spacer">SPACER</div>
</div>

@charset "utf-8";
/* CSS Document */

* 
{
	padding: 0;
	margin: 0;	
 	overflow-x: hidden;
	overflow-y: hidden;

}

body, html
{
	height:100%;     
	min-height:100%;
}

/**********/
/** DIV ***/
/**********/

div#banner
{
	width: 100%;
	height: 50px;
	background: #00F;	
}

div#menu
{
	width: 100%;
	height: 50px;
	background: #066;	
}

div#wrapper
{
	width: 100%;
	background: #999;
	padding: 20px;
	height: 100%;
	border-collapse: collapse;
}

img.bg {
    min-height: 100%;
	min-width: 1024px;
    width: 100%;
	height: auto;
    position: absolute;
	top: 102px;
	left: -5px;
	border: 5px solid #372e2b;
                }
                
                @media screen and (max-width: 1024px){
                        img.bg {
                                left: 50%;
                                margin-left: -512px; }
                }

div#blackbox
{
	width: 900px;
	background: #0FF;
	height: 100%;
	border-collapse: collapse;
	position: absolute;
}

div#spacer
{
	height: 20px;
	position: absolute;
	background: #9F0000;
	width: 56px;
}

[Mr.]

I think the overflow-y is messing it up... but without it you're left with a scroll bar. Tried but failed. Having a body with a 100% height isn't the best solution anyway. Just add your content and a clearfix and let the inner body extend itself with the content.