Javascript jquerymobile。使内容区域适合页眉和页脚

我正在尝试制作一个没有滚动条的全屏应用程序。内容区域应填满页眉和页脚之间的最大空间，强制页面达到100%高度。然后，网格行应在内容空间中均匀分布

这是到目前为止我的代码

页面标题
A区
B区
C区
A区
B区
C区
A区
B区
C区
页脚

Hi Omar可能重复。类似，但在这个问题中，我尝试按比例分割网格，以便在新调整大小的内容区域中均匀分割，根据水平网格的数量分割检索到的值；）我不能使用百分比高度吗？您可以使用px并在orientationchange和throttledresize上运行相同的函数。

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