Пробел в нижней части каждого экрана в JQuery Mobile 1,42

Вам нужно понять, как работают страницы jQuery Mobile. Нижний колонтитул и заголовок фиксируются с фиксированными значениями высоты. Контент с другой стороны растяжимый, поэтому он будет изменять размер в соответствии с его внутренним содержимым, он НИКОГДА не будет автоматически изменять размер, чтобы освободить оставшееся пространство, оставшееся после нижнего колонтитула и заголовка. Пространство, не охваченное контентом, - это пробел, о котором вы упоминаете.

Есть две доступные решения, две из которых: ваша - CSS, вторая - JavaScript.

Решение CSS:

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;    
}

40px здесь из-за верхнего и нижнего колонтитула, установите его в 0, если они вам не нужны.

Рабочий пример: http://jsfiddle.net/Gajotres/hJVuM/

Решение для JavaScript

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    }
    return content_height;
}

Рабочий пример: http://jsfiddle.net/Gajotres/5Qu6P/

Ream больше об этой теме здесь.