Make content section stretch down to the footer

I would like to make the class="content" stretch down to the footer. For the life of me I can't figure it out. I've tried many of the recommendations already posted with no results.

Here is what I got so far:

http://jsfiddle.net/eBR8e/

I need the red to fill down to the footer. Any suggestions?

HTML

<body>
    <div class="top-wrapper">
        <div class="header">
            Header
        </div>
        <div class="navigation">
            <div class="logo"></div>
            <div class="menu">
                Menu               
            </div>
        </div>

        <div class="content">
       Test<br> Test<br> Test<br>
        </div>
    </div>

    <div class="bottom-wrapper">
        <div class="footer">   
            footer.
        </div>
    </div>    
</body>

CSS

html
{
    height: 100%;
}

body
{
    height: 100%;
    width: 100%;
    margin: 0;
}

.top-wrapper
{
    min-height: 100%;
}

.header
{
    background-color:grey;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: #E5E529;
    box-shadow: 0 0 6px #848484;
    padding: 10px;
}

.navigation
{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.content
{
    background-color: red;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    overflow:auto;
    padding-bottom: 152px;
    border-style: solid;
    border-width: 2px;
    border-color: #E5E529;
}

.bottom-wrapper
{
    background-color: blue;
    border-style: solid;
    border-width: 2px 0 0 0;
    border-color: #E5E529;
    box-shadow: 6px 6px 6px 6px #848484;
    position: relative;
    margin-top: -152px;
    height: 150px;
    clear:both;
}

.footer
{
    padding: 10px 10px 10px 10px;
}

/* Menu CSS */
.logo
{
    width: 250px;
    height: 100px;
}

.menu
{
    width: 710px;
    margin-left: 250px;
    position: absolute;
    top: 41px;
    background-color: green;
}

Solution

With this 'sticky footer' example you're stretching the 'top-wrapper' only. I think in order to adjust the (minimum) height of the 'content' element it has to get calculated via JS.

Here is a example with jQuery: http://jsfiddle.net/eBR8e/1/

(function( window, $, undefined ) {

    var topWrapperHeight = $('.top-wrapper').height(),
        bottomWrapperHeight = $('.bottom-wrapper').height(),
        headerHeight = $('.header').outerHeight(),
        navigationHeight = $('.navigation').outerHeight(),
        contentHeight;

    contentHeight = topWrapperHeight - bottomWrapperHeight - ( headerHeight + navigationHeight );

    $('.content').css({
        'min-height' : contentHeight
    });
})( window, jQuery );

It's a pretty straight forward calculation, but let me know if you have any questions.