A new? sticky CSS footer....


Just trying to re-invent the wheel here...something I wrote this morning.
So far I have tested it in IE 9 (Win 7), Chrome, Chromium (Linux Mint), Midori (Mint), Opera (Mint and Win 7), Firefox 11 & 18(Mint and Win 7). I even tested it with IE 7(Win) and Safari 5.1(OSX).


----html-----                                                                                                                                 
                                                                                                                  
<div class="wrapper">
    <div class="header">Menu...or something </div>
        <div class="main_content"> Other stuff</div>
/div>

<div class="footer">Lorem Ipsum </div>     

The CSS is just as simple:

----css----                                
              
    html, body {
    height: 100%;
    margin:0;
    padding:0;
    }

.wrapper{
    min-height:100%;
    background-color:#00CC33;
    }

.header{
    background-color:#0099FF;
    }


.footer {
    background-color:#999999;
    height:50px;
    position:relative;
    margin-top:-50px;
    }


The background colors are there just for reference reasons.
I tried alot of the other solutions out there and it seems that all of the prominent ones were written in 2003, and they suck. This is the simplest, most elegant solution that I have seen....That is until we try it with a page that has more vertical content that needs to be scrolled. This screws everything up....So my solution was to give the wrapper a value of  "margin-bottom:50px;"  The problem then is the browser will ignore the "min-height:100%;"  and it sets the Wrapper  height to whatever arbitrary value it desires. 
How to overcome that behavior?