Make left column in 2 column layout take up 100% height with Sticky Footer

I'm trying to figure out how to make the left column take up 100% height in a 2 column layout with a sticky footer. The goal is for the sticky footer to not get stuck until it runs into the content of the left column. I'm using the negative margin approach to the sticky footer.

Please look at the JSFiddle below.

http://jsfiddle.net/x11joex11/2Ljgze37/8/

CSS:

/* Set Defaults */
* {height:100%;margin:0;}
.wrapper{
    background-color:rgba(0,0,0,0.25);
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin:0 auto -50px;
}
.clear {clear:both}

/* Create Header */
.header{
    height:50px;
    background-color:rgba(0,255,0,0.5);
}

/* Content */
.content{
    height:100%;
    padding-right:100px;
}

/* Left Column */
.leftside{
    float:left;
    height:100%;
    width:100px;
    background-color:rgba(0,0,255,0.5);
}

/*Right Column*/
.rightside{
    float:right;
    margin: 0 -100px 0 0; width: 100%;
    background-color:rgba(255,0,255,0.5);
}
.push{
    height:50px;
}
.stickyfooter{
    height:50px;
    background-color:rgba(255,0,0,0.75);
}

HTML:

<div class="wrapper">
    <div class="header">Header</div>
    <div class="content">
        <div class="leftside">
            Left Menu<br/><br/>
            Home<br/><br/>
            Page #1<br/><br/>
            Page #2<br/><br/>
            Page #3<br/><br/>
        </div>
        <div class="rightside">
            Right Content (lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
            (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
        </div>
        <div class="clear"></div>
        <div class="push"></div>
    </div>   
</div>
<div class="stickyfooter">Footer</div>

Solution

I was playing around with your Fiddle, and the first thing that comes to mind is we need to make an absolutely positioned background for your side nav.

You can add this outside your wrapper:

<div class="left-bg"></div>

and this css:

.left-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color:rgba(0,0,255,0.5);
    width:100px;
    z-index: -1;
}

Height doesn't work the same with Floats, you can also Absolutely position your content wrapper and the side nav and it should have 100% height that way, then use min-height to cause your footer to stop and not cover the content in your nav.

Fiddle: http://jsfiddle.net/3t5r2qg3/

As Joseph said in the comments, it is better in this scenario to use 'position: fixed;' compared to 'position: absolute;'