Question

I made an application using jQuery mobile, but now I have a huge problem. I can’t make the bottom menu bar to appear in the bottom of the page on iPhone. It works on nokia c6, and desktop browsers. I used position: absolute and bottom: 0. When I remove these properties it makes it tighter. See images.

• Without positioning properties
• Without positioning properties
• With positioning
• With positioning

Answer 1

If you want to make it appear on the bottom of the screen then you will have to check if the div containing your page is at least as long as the screen. Something like:

$('div[data-role="page"]').live('pageshow orientationchange', function () {
    var window_height = $(window).height();
    if ($(this).find('div[data-role="content"]').height() < window_height) {
        //window height minus the height of the header bar
        var th = (window_height - $(this).find('div[data-role="header"]')).height());

        //set page to height of window
        $(this).height(window_height);
        $(this).find('div[data-role="content"]').height(th);
    } else {
        //set page to height of window to auto so page does not cut-off at screen height
        $(this).height('auto');
        $(this).find('div[data-role="content"]').height('auto');
    }
});