如何防止jQuery mobile中的navbar重叠内容？

Question

我似乎无法找到导航栏重叠我的网页内容的解决方案。这是我的代码：

    <div data-role="page" data-control-title="List" id="pg-lst">
        <div data-theme="b" data-role="header" data-position="fixed">
            <a data-role="button" href="#pg-hm" data-icon="home" data-iconpos="notext" class="ui-btn-left"> </a>
            <h3> Establishments </h3>
            <div id="lst-navbar" data-role="navbar" data-iconpos="left">
                <ul>
                    <li>
                        <a href="#pg-fllwng" data-transition="none"> Following </a>
                    </li>
                    <li>
                        <a href="#pg-mp" data-transition="fade"> Map </a>
                    </li>
                </ul>
            </div>
        </div>
        <div data-role="content">                
            <div id="frm-srch" class="ui-grid-a">
                <div class="ui-block-a">
                    <ul id="autocomplete" data-role="listview" data-inset="true" data-mini="true" data-filter="true" data-filter-placeholder=""></ul>                        
                </div>
                <div class="ui-block-b">
                    <a id="btn-cancel-search" href="#"> Cancel </a>
                </div>
            </div>
            <ul id="lst-estblshmnt" data-role="listview" data-theme="c" data-inset="false" ></ul>
        </div>
    </div>

在下图中，您会看到导航栏与列表视图过滤器重叠。

任何建议都将不胜感激！

非常感谢。

Answer 1

这与将data-position:fixed与高度超过1.1em的标题结合使用有关。

默认情况下.ui-content的填充量为1em，您需要对其进行调整，并在padding-top属性中提供更多内容，以避免内容重叠。

你可以尝试

.ui-content {
  padding-top:2em
}

......看看情况如何。你可能需要稍微调整它以满足你的需要。

---

编辑：

刚刚创建了一个Plunker来测试它，并且jQuery Mobile的标准CSS似乎没有问题。所以问题可能在你自己的CSS中。