ヘッダー、フッターが固定されているときにコンテンツを整列する方法

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>