Header overlay div content in jquery-mobile

I thought this would be a jquery-mobile 1.1.0 RC problem. But also in the final release, I got this strange problem that my title overlaps my content div:

Header including navbar overlaps my content div

When I now click somewhere in the content div, the page rerenders and the div content are in the right position (right under the heading).

I am using Backbone.js Views to represent content and jquery-mobile-router. I tried almost everything, but I did not find a solution for this problem.

Does anyone know a solution for this?

html:

<!-- newsoffers page -->
<div data-role="page" id="newsoffers">
    <div data-role="header" data-theme="a" data-fullscreen="false" data-position="fixed">
    </div>
    <!-- /content -->
    <div data-role="content" data-scroll="true" class="content-full">
    </div>
    <!-- /content -->
    <div id="newsoffersFooter" data-role="footer" data-position="fixed" data-fullscreen="false" data-id="mainFooter" data-theme="b">
    </div>
    <!-- /footer -->
</div>

The code for the header is dynamically entered! Content will be entered while the "pagebeforeshow" event is fired.

code for showing page

"setNavBarCollection" , . refreshOffers , , .

+3

All Articles