jQuery Mobile Div頂部

Question

有點奇怪的請求，我知道。

我有一個jQueryMobile頁面，一個簡單的，你可以看到：

<div data-role="page" class="type-home" id="home"> 
     <div data-role="header" data-theme="b"> 
      <h1>Our Tools</h1> 
     </div> 
     <div data-role="content"> 
      <ul data-role="listview"> 
     ...... 

我需要把一個div包含在一個100像素高含量極頂，任何樣式或DIV之外的jQuery Mobile的使用。

這將如何完成，因爲添加一個普通的Div，只是被jQuery Mobile所覆蓋。

我不能使用iFrame，它必須全部在html中的一頁上。

Answer 1

如果你想要一個靜態頭類型的DIV，這對我來說很有用。 我放了一個固定高度的「標題」，然後用下面的邊距頂部偏移「內容」。 .ui-content是由jQM自動添加的類。

HTML：

<div data-role="page" id="somePage"> 
     <div class="ui-bar ui-bar-b"> 
      <a data-role="button" href="#main" data-transition="none" data-theme="a"></a> 
      <h1>Some header</h1> 

     </div> 
     <div data-role="content"> 
      <div id="someDiv"> 
       </div> 
     </div> 
    </div> 

CSS：

.ui-bar { 
    position: fixed; 
    height: 100px; 
    z-index: 10000; 
    width: 100%; 
    padding: 0px 5px; 
    box-sizing: border-box; 
} 

.ui-content { 
    position: relative; 
    padding: 10px; 
    margin-top: 100px; 
}