如何在页眉，页脚固定时对齐内容

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>