Fixed footer auto expanding outside?

Question

I want to use this parallax effect http://jsfiddle.net/KsdeX/1/light/ but the only problem is when using min-height and not a fixed height the footer expands inside depending on the footer content .

Below is the example with the auto sizing
http://jsfiddle.net/KsdeX/62/

So is there any way to push or to make the fixed footer to auto expand outside and not below the body content?

HTML

<div class="wrapper-parallax">
    <header>
        <h1>Header</h1>
    </header>

    <div class="content">
        <h1>Content</h1>
    </div>

    <footer>
        <h1>Footer</h1>
    </footer>
</div>

CSS

 body {
    margin: 0;
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100px;
    background: cyan;
}

.content {
    position: relative;
    z-index: 1;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background: white;
    min-height: 500px;
}
wrapper-parallax {
    margin-top: 100px;
    margin-bottom: 60px;
}
footer {
    width: 100%;
    position: fixed;
    z-index: -1;
    bottom: 0;
    background: green;
    height: 60px;
}   

Answer 1

You could use jQuery to calculate the height of your footer when the page loads, then assign that value with .css() to the margin-bottom of .wrapper-parallax.

$(document).ready( function() {
    var footerHeight = $('footer').height();
    $('.wrapper-parallax').css('margin-bottom', footerHeight); 
});

http://jsfiddle.net/johntobinme/KsdeX/63/