jQuery移动头截取内容

我正在从事一个jQuery移动项目，我想使用全屏标题

data position=“fixed”data fullscreen=“true”

。我遇到的问题是页眉正在剪切内容

我试图找出一种方法，使内容随着标题的移动而移动。因此，当标题可见时，内容被向下推，因此不会被切断；当标题不可见时，内容被向上推，以最小化空白

据我所知，唯一的方法是使用数据角色

content

动态更改div的

margintop

css规则。我以为这很容易，但事实并非如此

这是我的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>

及

$（document）.on（'pageshow'，'#index'，函数（e，data）{
$（'#content'）.height（getRealContentHeight（））；
});
函数getRealContentHeight（）{
var header=$.mobile.activePage.find（“div[data role='header']：可见”）；
var footer=$.mobile.activePage.find（“div[data role='footer']：visible”）；
var content=$.mobile.activePage.find（“div[data role='content']：visible:visible”）；
var viewport_height=$（窗口）.height（）；
var content_height=viewport_height-header.outerHeight（）-footer.outerHeight（）；
if（（content.outerHeight（）-header.outerHeight（）-footer.outerHeight（））是一个很好的解决方案

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

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

上面的代码在页面创建时设置内容的边距，并在用户单击通常会折叠标题的任何位置时重新设置边距

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

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

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