title: Create buttons using jquery-mobile that stretch fullscreen
body: <p>I'm trying to create a home page screen where the buttons in the body take up the full screen after the header and footer.  Ideally the buttons 2x2 will stretch out to the remaining space on the screen.</p>
  
  <p>I tried using ui-grid-a to stretch the buttons to the width of the screen but was unable to alter the height to the screensize.</p>
  
  <pre><code>   &lt;section id="Home" data-role="page"&gt;
     &lt;header data-role="header"&gt;
          &lt;a href="#Home"&gt;Home&lt;/a&gt;
          &lt;h1&gt;testapp&lt;/h1&gt;
          &lt;a href="#Setup"&gt;Setup&lt;/a&gt;
     &lt;/header&gt;
  
     &lt;div data-role="content"&gt;
          &lt;fieldset class="ui-grid-a"&gt;
              &lt;div class="ui-block-a"&gt;&lt;a href="#button1" data-role="button" data-inline="false"&gt;button1&lt;/a&gt;&lt;/div&gt;
              &lt;div class="ui-block-b"&gt;&lt;a href="#button2" data-role="button" data-inline="false"&gt;button2&lt;/a&gt;&lt;/div&gt;
              &lt;div class="ui-block-a"&gt;&lt;a href="#button3" data-role="button" data-inline="false"&gt;button3&lt;/a&gt;&lt;/div&gt;
              &lt;div class="ui-block-b"&gt;&lt;a href="#button4" data-role="button" data-inline="false"&gt;button4&lt;/a&gt;&lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
  
     &lt;footer data-role="footer"  data-role="footer" data-position="fixed"&gt;
          &lt;fieldset class="ui-grid-a"&gt;
              &lt;div class="ui-block-a"style="text-align:left"&gt;&lt;a href="#button1"  data-role="button" data-transition="slide" data-inline="false"&gt;button1&lt;/a&gt;&lt;/div&gt;
              &lt;div class="ui-block-b"style="text-align:right"&gt;&lt;a href="#button2" data-role="button" data-transition="slide" data-inline="false"&gt;button2&lt;/a&gt;&lt;/div&gt;
          &lt;/fieldset&gt;
     &lt;/footer&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm a noobie at coding so any help would be appreciated.  Thanks in advanced.</p>