Jquery mobile phonegap cordova菜单网格

我正在使用phonegap/cordova开发一个移动应用程序。我希望我的主菜单是一组图标，下面有一个简短的文本，所有图标都在网格布局中对齐（例如，2行x 3列）。 我也在使用jquerymobile。对于我的“页面”，我有一个固定的“页眉”和“页脚”区域，“内容”当前为：

<div class="ui-grid-b ui-responsive" >
   <div class="ui-block-a"><div class="ui-bar ui-bar-a">
      <a href="#"><p><img src="./img/menu1.png"></p><h2>OPT1</h2></a>
   </div></div>
   <div class="ui-block-b"><div class="ui-bar ui-bar-a">
      <a href="#"><p><img src="./img/menu2.png"></p><h2>OPT2</h2></a>
    </div></div>                    
    <div class="ui-block-c"><div class="ui-bar ui-bar-a">
      <a href="#"><p><img src="./img/menu3.png"></p><h2>OPT3</h2></a>
    </div></div>                    
    <div class="ui-block-a"><div class="ui-bar ui-bar-a">
      <a href="#"><p><img src="./img/menu4.png"></p><h2>OPT4</h2></a>
    </div></div>                    
    <div class="ui-block-b"><div class="ui-bar ui-bar-a">
      <a href="#"><p><img src="./img/menu5.png"></p><h2>OPT5</h2></a>
    </div></div>                    
    <div class="ui-block-c"><div class="ui-bar ui-bar-a">
      <a href="#"><p><img src="./img/menu6.png"></p><h2>OPT6</h2></a>
    </div></div>                    
</div>                      

我希望通过调整网格整体高度或调整行高度，网格的高度等于“内容”的高度。我不想定义一个固定的高度，因为菜单应该根据不同的屏幕大小进行调整。（如果某些JS可以相应地更改高度，那么高度可能是一个数字）

在网上有一些方法可以做到这一点，但我找不到任何自动调整高度的方法。 示例如下：

这个解决方案可以是任何类型的。。。CSS、JS等

谢谢你的建议

---

干杯

你能提供jsfiddel吗？这个问题仍然没有答案。。。我想知道它是否缺乏信息。我们的目标只是像网格一样划分“内容”，根据可用的宽度和高度进行调整。宽度部分很简单，问题是关于高度。