Jquery Mobile. Make the content area fit between header and footer

Question

I'm trying to make an app that is full screen without scroll bars. The content area should fill the maximum space between the header and footer, force the page to 100% height. The grid rows should then fit evenly in the content space.

Here is my code so far

http://jsfiddle.net/Kmyg6/4/

    <div data-role="page">
    <div data-role="header">
            <h1>Page Title</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content" id="contentDiv">
        <!-- /content -->
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a" style="height:30%">Block A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-a" style="height:30%">Block B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-a" style="height:30%">Block C</div>
            </div>
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a" style="height:30%">Block A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-a" style="height:30%">Block B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-a" style="height:30%">Block C</div>
            </div>
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-a" style="height:30%">Block A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-a" style="height:30%">Block B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-a" style="height:30%">Block C</div>
            </div>
        </div>
    </div>
    <!-- /grid-c -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->