Edit in JSFiddle

$(document).ready(function(){
   var dynamic = $(document).height();
	var static = $('.sidebar');    
    static.css({
		'min-height': dynamic,
		'max-height': dynamic
	 });
});
	 

<div class="header">Header</div>
<div class="sidebar">Side Bar</div>
<div class="middlecontent">
    Content</div>
<div class="footer">Sticky Footer</div>

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 30px;
}
.header{
    width:100%;
    height:20px;
    background:#000;
    color:#fff;
    padding:10px;
}
.sidebar{
    float:left;
    width:30%;
    background:yellow;
}
.middlecontent{
    float:left;
    width:70%;
    
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: #222;
 }