Jquery mobile:如何设置面板推送内容而不是页眉和页脚?

时间:2015-06-29 08:51:42

标签: jquery-mobile panel

我有一个带导航面板的简单页面,我想推送的内容不包括页眉和页脚。这是我的示例代码:

<div data-role="page" class="jqm-demos" id="tpage" data-title="Panel fixed positioning" data-url="tpage">
    <div id="myhead" data-role="header" data-position="fixed"  style="min-height: 160px;">
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
                <h1> Sample header </h1>

    </div><!-- /header -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <h1>content</h1>
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed">
        <h4>Fixed footer</h4>
    </div><!-- /footer -->
    <div data-role="panel" data-position="left" data-display="overlay" data-theme="b" id="nav-panel">
       panel
    </div><!-- /panel -->

</div> 

我尝试搜索但是我发现的是叠加而不是推。

1 个答案:

答案 0 :(得分:0)

添加:

/*jquery mobile fix for fixed header*/
div[data-role=header]{
        position: absolute;
        top: 0px;
        z-index: 9999;
        width: 100%;
}

div[data-role=page]{
    position: relative;
}