Мобильный заголовок jQuery отсекает контент

Question

Я работаю над мобильным проектом jQuery, где хочу использовать полноэкранные заголовки data-position="fixed" data-fullscreen="true", Проблема, с которой я сталкиваюсь, заключается в том, что заголовок врезается в содержимое.

Я пытаюсь найти способ заставить контент двигаться с помощью заголовка. Таким образом, когда заголовок виден, то содержимое выталкивается вниз, чтобы не обрезаться, а когда заголовок не виден, содержимое выталкивается вверх, чтобы минимизировать пустое пространство.

Насколько я могу сказать, единственный способ сделать это - динамически изменить margin-top Правило CSS для DIV с ролью данных content, Я думал, что это будет легко, но это не так.

Вот мой HTML:

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed" data-fullscreen="true" id='header'>Some Header Stuff</div>
    <div data-role="content" id="content">Some Content Stuff</div>
    <div data-role="footer" data-position="fixed" data-fullscreen="true">Some Footer Stuff</div>
</div>

До сих пор я безуспешно пробовал следующие решения jQuery:

jQuery(document).on('pagecreate', function () {
    $("#content").css('margin-top', $('#header').height());
});

а также

$(document).on('pageshow', '#index',function(e,data){   
    $('#content').height(getRealContentHeight()); 
});

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

Оба эти решения пытаются захватить свойство высоты заголовка и, как я могу сказать, заголовок с настройками data-position="fixed" data-fullscreen="true" всегда показывает высоту 0.

Я видел другие решения, такие как добавление кучу <br/> теги или добавление пустого div. Все эти решения сохраняют пустой пробел, когда заголовок не виден. Кто-нибудь знает, как на самом деле сделать заголовок переключать содержимое вверх и вниз на основе видимого заголовка или нет?

Answer 1

Выяснилось отличное решение

$(document).on('pageshow', function () {
    $("#content").css('margin-top', $('#header').height());
});

$(document).on('vmouseup', '#index',function () {
    setTimeout(function() {
        $("#content").css('margin-top', $('#header').height());
    }, 300);    
});

Приведенный выше код устанавливает поле содержимого при создании страницы и повторно устанавливает поле, когда пользователь щелкает в любом месте, которое обычно все равно сворачивает заголовок.