Make middle body box grow to bottom of footer

[Oppornott]

Using this Fiddle, how would it be changed so the red border grows to the top of the footer. The end result would be the red box takes up the middle part of the page.HTML\[code\]<div class="wrapper"> <div class="header">HEADER</div> <div class="body">BODY</div> <div class="push"></div></div><div class="footer">FOOTER</div>\[/code\]CSS\[code\].header { height: 60px; background-color: #999; }.footer { height: 61px; background-color: #999; }.body { border: 1px solid red; }/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */* { margin: 0; }html, body { height: 100%; }.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px auto; /* the bottom margin is the negative value of the footer's height */ }.footer, .push { height: 60px; /* .push must be the same height as .footer */ clear: both; }form { height: 100%; }/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */\[/code\]