如何防止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中。