Question

I have created a simple jquery mobile application with fixed header & footer. It works fine but, the contents are overlapped on header as contents should be displayed after header.
Here is my markup:

<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>

How do i align my contents?

Answer 1

Setting data-fullscreen="true" is meant more for pictures. By design it is meant to be a little transparent and sit on top of content.

I suggest you get rid of the data-fullscreen=”true”. Don’t worry your tool bars will still be fixed but will not overlap content. Change your markup to this:

<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>