jquery 移动固定页眉/页脚不工作

Question

所以我在 JQM 1.1 中有一个像这样的固定 header :

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

根据要求，这里是一个更完整的页面 View :

<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。这覆盖了很多样式并导致了各种古怪的行为。希望对某人有所帮助!