jQuery Mobile simple sample (JQM b2)

HTML

<div data-role="page" id="page" data-theme="a">
    <div data-role="header">
         <h1>Test Page</h1>

    </div>
    <div data-role="content" id='test'>
        <div class="ui-grid-a">
            <div class="ui-block-a"> <a href="#" class="ui-btn">Test</a>

            </div>
            <div class="ui-block-b"> <a href="#" class="ui-btn">Test</a>

            </div>
            <div class="ui-block-a"> <a href="#" class="ui-btn">Test</a>

            </div>
            <div class="ui-block-b"> <a href="#" class="ui-btn">Test</a>

            </div>
            <div class="ui-block-a"> <a href="#" class="ui-btn">Test</a>

            </div>
            <div class="ui-block-b"> <a href="#" class="ui-btn">Test</a>

            </div>
        </div>
    </div>
</div>

CSS

.ui-btn {
    margin: .1em 0;
}

JavaScript

function contentHeight() {
    var screen = $.mobile.getScreenHeight();

    var header = $("#page .ui-header").hasClass("ui-header-fixed") ? $("#page .ui-header").outerHeight() - 1 : $("#page .ui-header").outerHeight();

    var footer = $("#page .ui-footer").hasClass("ui-footer-fixed") ? $("#page .ui-footer").outerHeight() - 1 : $("#page .ui-footer").outerHeight();

    var contentCurrent = $("#page .ui-content").outerHeight() - $("#page .ui-content").height();

    var content = screen - header - footer - contentCurrent;
    var numRows = 3;

    $("#test.ui-content .ui-block-a .ui-btn, #test.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);
}

$(document).bind("pagebeforecreate", function (e, data) {
    $(document).on("pagecontainertransition", contentHeight);
    $(window).on("throttledresize orientationchange", contentHeight);
});