Create buttons using jquery-mobile that stretch fullscreen

问题

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.

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.

   <section id="Home" data-role="page">
   <header data-role="header">
        <a href="#Home">Home</a>
        <h1>testapp</h1>
        <a href="#Setup">Setup</a>
   </header>

   <div data-role="content">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#button1" data-role="button" data-inline="false">button1</a></div>
            <div class="ui-block-b"><a href="#button2" data-role="button" data-inline="false">button2</a></div>
            <div class="ui-block-a"><a href="#button3" data-role="button" data-inline="false">button3</a></div>
            <div class="ui-block-b"><a href="#button4" data-role="button" data-inline="false">button4</a></div>
        </fieldset>
    </div>

   <footer data-role="footer"  data-role="footer" data-position="fixed">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"style="text-align:left"><a href="#button1"  data-role="button" data-transition="slide" data-inline="false">button1</a></div>
            <div class="ui-block-b"style="text-align:right"><a href="#button2" data-role="button" data-transition="slide" data-inline="false">button2</a></div>
        </fieldset>
   </footer>

I'm a noobie at coding so any help would be appreciated. Thanks in advanced.

回答1:

I believe this is what your looking for. http://jsfiddle.net/codaniel/JAjJp/1/embedded/result/

CSS

<style>
   .button{padding:25% 0;}
</style>

HTML

<section id="Home" data-role="page">
   <header data-role="header">
        <a href="#Home">Home</a>
        <h1>testapp</h1>
        <a href="#Setup">Setup</a>
   </header>

   <div data-role="content">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#button1" class="button" data-role="button" data-inline="false">button1</a></div>
            <div class="ui-block-b"><a href="#button2" class="button" data-role="button" data-inline="false">button2</a></div>
            <div class="ui-block-a"><a href="#button3" class="button" data-role="button" data-inline="false">button3</a></div>
            <div class="ui-block-b"><a href="#button4" class="button" data-role="button" data-inline="false">button4</a></div>
        </fieldset>
    </div>

   <footer data-role="footer"  data-role="footer" data-position="fixed">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"style="text-align:left"><a href="#button1"  data-role="button" data-transition="slide" data-inline="false">button1</a></div>
            <div class="ui-block-b"style="text-align:right"><a href="#button2" data-role="button" data-transition="slide" data-inline="false">button2</a></div>
        </fieldset>
   </footer>
</section>

回答2:

Does this work:

http://jsfiddle.net/Pq9YP/

Using a navbar with one list item

来源：https://stackoverflow.com/questions/9638106/create-buttons-using-jquery-mobile-that-stretch-fullscreen

标签

button

jquery-mobile

height