Question

我正在尝试创建一个主页屏幕，其中正文中的按钮在页眉和页脚之后占据整个屏幕。理想情况下，按钮2x2将伸展到屏幕上的剩余空间。

我尝试使用ui-grid-a将按钮拉伸到屏幕宽度但无法改变屏幕尺寸的高度。

   <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>

我是编码的诺言，所以任何帮助都会受到赞赏。谢谢你提前。

Answer 1

这是否有效：

http://jsfiddle.net/Pq9YP/

使用带有一个列表项的导航栏

Answer 2

我相信这就是你要找的东西。 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>

使用全屏拉伸的jquery-mobile创建按钮

2 个答案:

CSS

HTML