滚动时Phonegap Applicatin标头移动

Question

I'm working on a Phonegap application.I have used header for every page. But when i tested it in the phone, & when i scroll it down sometimes header also move & joined the body elements .(header & the body elements should have some space) .This is my cord...

<div data-role="page" id="detail-page" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>xxxxxxxxxxxxx</h1>
</div>
<div data-role="content">
<form>
    <ul data-role="listview" data-inset="true" data-theme="a">
        <li ><div data-role="fieldcontain">
            <label for="textarea">name </label>
            <input type="text" name="name" id="name" value=""/></div>
        </li>
        <li ><div data-role="fieldcontain">
            <label for="address">xxxxxxxxx</label>
            <input type="hidden" name="xxxxx"/></div>
            <label for="xxxxxxx">xxxxxxxx:</label>
            <input type="text" name="xxxxx" id="xxxxxx" value="" />
            <label for="district">xxxxxxxxxx</label>
            <input type="text" name="xxxxxxx" id="xxxxxxxxxx" value=""/>
        </li>
        <li>
        <div data-role="fieldcontain">
        <label for="date">Date</label>
        <input type="datetime-local" name="date" id="name" value=""/></div></li>
        <li>
        <div data-role="fieldcontain">
        <label for="textarea">xxxxxxxxxxxx</label>
        <input type="text" name="xxxxxxxxxxx" id="xxxxxxxxxxxx" value=""/></div></li>

        </ul>

     <div data-role="fieldcontain">
     <button type="submit" name="save" id="save" value="Save" data-theme="a"/></div>

    </form>
    </div></div>

Please help me with this issue.. Thanks.

Answer 1

Add footer ..

<div data-role="footer" data-position="fixed">
          <h1>Fixed Footer!</h1>
      </div>