jquery - 如何防止 jQuery mobile 中的导航栏重叠内容？

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>

在下图中，您将看到导航栏与 ListView 过滤器重叠。

如有任何建议，我们将不胜感激!

非常感谢。

Answer 1

这与使用 data-position:fixed 以及高度超过 1.1em 的 header 有关。

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

你可以试试

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

...看看情况如何。不过，您可能需要稍微调整它以满足您的需求。

<小时/>

编辑:

刚刚创建了一个Plunker进行测试，发现 jQuery Mobile 的标准 CSS 似乎没有问题。所以问题可能出在你自己的 CSS 上。