Question

所以我在JQM 1.1中有一个固定的标题，如下所示：

----开始编辑----

根据要求，这是一个更完整的页面视图：

<div id="listPage" data-role="page" class="page-ovveride">

        <div data-role="header" id="applicationHeader" data-theme="b" data-position="fixed">
            <h1 class="ui-title" role="heading" aria-level="1">Mobile</h1>
        </div> 

        <div data-role="content" id="applicationContent">
             <ul id='ListTable' data-role="listview" data-inset='false'>  
                <!-- Placeholder for list table -->          
            </ul> 
        </div> 

        <div data-role="footer" id="applicationFooter" data-theme="b" data-position="fixed">
            <div id="navbar" data-role="navbar" > 
                <ul> 
                    <li class="ui-btn-active"><a href="#listPage" id="list" data-icon="grid" data-transition="none">List</a></li> 
                    <li><a href="#StuffPage" id="stuff" data-icon="star" data-transition="none">Stuff</a></li> 
                    <li><a href="#MaorStuffsPage" id="moar" data-icon="alert" data-transition="none">Moar</a></li> 
                </ul> 
            </div>
        </div> 

    </div> <!-- end list page -->

page-ovverride类看起来像这样。出于某种原因，我认为JQM在顶部和底部插入了一堆填充，这导致了问题。这就是班级的样子：

.page-ovveride {
    padding-top:0 !important;
    padding-bottom:0 !important;
}

这就是我填充表格的方式

$List.append(
    $('<li>').attr('id', id).append(
        $('<a>').attr('href','#newPage').attr('data-transition', 'slide').append(
        $('<h3>').text(name),
        $('<p>').text(description)
    )));

然后循环之后：

$List.listview('refresh');

----结束编辑----

但由于某种原因，这并不能使任何浏览器中的内容都显得固定。我正在查看1.1文档here，但这似乎不起作用？有谁知道发生了什么事？如果您需要查看更多信息，请告诉我们！

谢谢！

更新：即使我拿出page-ovverride类，它仍然无法正常工作。到底是怎么回事！？

Answer 1

我明白了。我在我早期的一个JQM实现中包含了一个遗留文件，其中我使用的是主题滚轮，其中包含一个文件jquery.mobile.structure.css。这会使许多风格失效并导致各种不良行为。希望能帮助别人！

Answer 2

适合我：http://jsfiddle.net/XRKcX/1/。也许你忘了包含一些东西？

Answer 3

试试这个：

<div id="listPage" data-role="page" class="page-ovveride" data-fullscreen="true">
.
.
.
.
</div>

Answer 4

这是另一个可能的原因：我遇到了一个固定标头的问题，该标头不适用于具有动态添加内容的页面。事实证明，如果页面内容最初比窗口短，则jQueryMobile在我的标题中添加了一个“ui-fixed-hidden”类，当内容增长到大于窗口时，该标题没有删除。

我通过添加以下代码行，在将内容写入名为resultsdiv的页面上的div后立即解决了问题：

    resultsdiv.parents('.ui-page').find('.ui-header').removeClass('ui-fixed-hidden');

这是一个可怕的低级黑客，但到目前为止已经奏效。

jquery移动固定页眉/页脚无法正常工作

4 个答案: