Filling a full page in JQM

Filling a full page in JQM

Hi,
I am using phonegap on Android 2.3 with JQM, and trying to set a login page, with a blue background that fills the whole page.


My problem is that:
when using data-theme="b", only the part that contain content is colored in blue. The empty part of the page , is showing a grey gap.


I was trying many tweak with:
1. CSS 'min-height' property (style="min-height:100% !important;") with the page div, and each of its sub divs.
2. Javascript solutions I found on the web....
3. Setting the header & footer with  data-fullscreen="true" data-position="fixed" .


But none helped - the grey gap remains.


The documentation ( http://jquerymobile.com/test/docs/content/content-themes.html ) suggest setting the page div with an additional  data-content-theme attribute :
<div data-role="page" data-theme="a" data-content-theme="a" >


I believe that the JQM framework should have a very simple solution for this issue, because filling the whole page is a very common requirement. I really hope that there is such solution that I wasn't aware of... 



Attached below is my page's HTML code:


  1. <!DOCTYPE html> 
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1"> 

  7. <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
  8. <script src="js/jquery.min.1.7.1.js" type="text/javascript"></script>
  9. <link rel="stylesheet" href="CSS/jqm-docs.css"/>
  11. <script src="js/jquery.mobile.1.2.test.js"></script>
  12. <link rel="stylesheet" href="CSS/jquery.mobile.1.2.test.css"/>
  13. </head> 

  15. <body> 
  16. <div id="login" data-role="page" data-theme="b" data-content-theme="b">
  17. <div data-role="content" >
  18. <div class="content-primary">
  21. <ul data-role="listview">
  22. <li data-role="fieldcontain">
  23. <div id="popupLogin" class="ui-corner-all">
  24. <div style="padding:10px 20px;">
  25.  <h1 style="margin:20px;">Please sign in:</h1>
  26.  <div style="margin:20px;">
  27. <label for="un" class="ui-hidden-accessible">Username:</label>
  28. <input style="padding:10px 20px;" type="text" name="user" id="username" value="" placeholder="username" data-theme="b" />
  29.  </div>
  30.   
  31.  <div style="margin:20px;">
  32. <label for="pw" class="ui-hidden-accessible">Password:</label>
  33. <input style="padding:10px 20px;" type="password" name="pw" id="password" value="" placeholder="password" data-theme="b" />
  34. </div>
  35. <div style="margin:20px;">
  36.  <button id="login_button" data-theme="b">Sign in</button>
  37. </div>
  38. </div>
  39. </div>
  40. </li>
  41. </ul>
  44. </div><!--/content-primary -->
  45. </div><!-- /content -->
  46. </div><!-- /page -->
  47. </body>
  48. </html>

At this point, I am willing to use any solution, even if it means setting the background to a fixed color (#396B9E). Which by the way, I also didn't manage to do, the JQM framework always get in the way.
These are the syle settings I've tried:

  1.   .ui-page { background: #396B9E;}
  2.   
  3.   .ui-body-b, .ui-overlay-b {
  4.     background: -moz-linear-gradient(#396B9E, #396B9E) repeat scroll 0 0 #396B9E !important;
  5. color: #396B9E;
  6. background-color: #396B9E;
  8. background-image: -webkit-gradient(linear, left top, left bottom, from( #DDD /*{b-body-background-start}*/), to( #CCC /*{b-body-background-end}*/));
  9. background-image: -webkit-linear-gradient( #396B9E/*{b-body-background-start}*/, #396B9E/*{b-body-background-end}*/);
  10. background-image: -moz-linear-gradient( #396B9E/*{b-body-background-start}*/, #396B9E /*{b-body-background-end}*/);
  11. background-image: -ms-linear-gradient( #396B9E/*{b-body-background-start}*/, #396B9E /*{b-body-background-end}*/);
  12. background-image: -o-linear-gradient( #396B9E/*{b-body-background-start}*/, #396B9E /*{b-body-background-end}*/);
  13. background-image: linear-gradient( #396B9E/*{b-body-background-start}*/, #396B9E /*{b-body-background-enend}*/);
  14. }
I will appreciate any help...
Regards,
Roei.