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

【问题标题】：How to prevent navbar overlapping content in jQuery mobile?如何防止 jQuery mobile 中的导航栏重叠内容？
【发布时间】：2014-09-30 04:38:17
【问题描述】：

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

    <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>

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

任何建议将不胜感激！

非常感谢。

【问题讨论】：

你能加个小提琴吗？还需要查看您的 CSS

标签： jquery jquery-mobile

【解决方案1】：

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

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

你可以试试

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

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

编辑：

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

【讨论】：