如何防止jQuery手机中的导航栏重叠内容？

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的标头相结合。

默认情况下，.ui-content的填充值为1em，您需要调整该值并在padding-top属性中给予更多值以避免内容重叠。

你可以尝试

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

...并看到如何继续下去。尽管如此，您可能需要稍微调整以适应您的需求。

---

编辑：

刚刚创建了一个Plunker对其进行测试，并有不似乎与jQuery Mobile的标准CSS的问题在那里。所以这个问题可能在你自己的CSS中。