jquery mobile固定页眉/页脚不起作用答案

【问题标题】：jquery mobile fixed header/footer not workingjquery mobile固定页眉/页脚不起作用
【发布时间】：2015-12-02 18:29:58
【问题描述】：

所以我在 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 类，它仍然不起作用。到底是怎么回事！？

【问题讨论】：

给我们更多你的代码。你目前拥有的对我有用。一定有其他原因导致了这个问题。

标签： jquery css html jquery-mobile

【解决方案1】：

我想通了。我包含了一个来自我非常早期的 JQM 实现的遗留文件，其中我使用了主题滚轮，其中包括一个文件 jquery.mobile.structure.css。这覆盖了很多样式并导致了各种古怪的行为。希望对某人有所帮助！

【讨论】：

【解决方案2】：

为我工作：http://jsfiddle.net/XRKcX/1/。也许您忘记包含某些内容？

【讨论】：

您必须能够滚动才能真正测试它。它在我的浏览器中看起来也是正确的，但这并不意味着它们的行为就像固定工具栏应该的那样。
我同意是其他原因导致了您的问题。我做了自己的测试，它也对我有用。 link
您认为这与我向表格中动态添加内容的方式有关吗？

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：