Jquery Mobile。使内容区域适合页眉和页脚

Question

我试图创建一个没有滚动条的全屏应用。内容区域应填充页眉和页脚之间的最大空间，强制页面高度为100％。然后，网格行应该均匀地放在内容空间中。

到目前为止，这是我的代码

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 -->