JQueryMobile 1.1-rc1 Fixed header causing page scrolling when not required

Question

I am using new fixed headers available in jQM 1.1-rc1

The page looks like this:

<div data-theme="a" data-role="page" data-title="Home" id="home_page" > <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false"> <h1>Home</h1> </div> <div data-role="content" id="categories_content"> <ul data-role="listview" data-theme="a" id="categories_list"> <li>something</li> <li>something else</li> </ul> </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false"><h1>Home</h1></div> </div> 

My problem is that the page scrolls when there is no need to scroll it. The list is short and does not fall below the footer.

Has anyone encountered this problem before, and if so, how did you overcome it?

Here is the jsfiddle showing the problem: jsFiddle

Thanks in advance.

Answer 1

This seems to be a bug with jQuery Mobile. Filling is added to the .ui-page elements to account for the header and footer, but the height is not updated correctly when the page loads or when the browser is resized. You can fix this with a hack:

 //bind to the resize event for the window element ​$(window)​.on('resize', function () { //set a timeout to allow jQuery Mobile to update the element before we correct the value setTimeout(function () { //change the height of the current page to get rid of the scroll bar $.mobile.activePage.css('minHeight', '-=85px'); }, 50); //trigger a resize event onload }).trigger('resize')​;​​ 

Update

I started a bug report on Github for jQuery Mobile to solve this problem: https://github.com/jquery/jquery-mobile/issues/3825