如何在頁眉，頁腳固定時對齊內容

Question

我創建了一個簡單的jquery移動應用程序，其中包含固定頁眉&頁腳。它工作正常，但內容重疊在標題上，因爲內容應該在標題後顯示。 這裏是我的標記：

<div data-role="page" data-fullscreen="true"> 
     <header data-role="header" data-position="fixed"> <h1>Header</h1></header> 
     <div data-role="content" class="content"> 
      Contents 
     </div> 
     <footer data-role="footer" data-position="fixed">Footer</footer> 
</div> 

如何對齊我的內容？

Answer 1

設置data-fullscreen="true"意味着更多的照片。通過設計，它意味着有點透明，並且位於內容之上。

我建議你擺脫data-fullscreen =「true」。不要擔心，您的工具欄仍將被固定，但不會重疊內容。將您的標記更改爲：

<div data-role="page"> 
    <header data-role="header" data-position="fixed"> <h1>Header</h1></header> 
    <div data-role="content" class="content"> 
     Contents 
    </div> 
    <footer data-role="footer" data-position="fixed"><h1>Footer</h1></footer> 
</div>