css - 使用百分比来操纵 jQuery Mobile 的 div 的高度

Question

我想在 jQuery Mobile 中创建一个内容页面，其中我在 jQuery Mobile 的内容区域内有 2 个 div，一个在另一个之上。问题是当屏幕尺寸改变时，下部 div 位于上部 div 之上。我想要的是，当屏幕尺寸发生变化时，它会保持一个位于另一个之上的相同 div 结构。我想知道我是否可以使用网格，但不确定网格是否适用于 1 列但 2 行？

我的代码如下:

CSS

 #songName {
    text-align:center;
    width: 100%;
    height: 20px;
}

#songPicture {
    text-align:center;
    width: 100%;
    height: 50%;
}

HTML

<div data-role="content" style="height: 100%">
    <div id="songName"></div>
    <div id="songPicture"></div>
</div>

请注意 div 的内容来自 JSON，而 id songName 是纯文本，id songPicture 内容如下所示:

<img src='"image url+"' style='position: absolute; left: 50%; margin-left: -128px; top: 50%; margin-top: -171px; width: 256px; height: 256px;' />

Answer 1

为每个 div 使用 ui-grid-solo 类。

<div class='ui-grid-solo'>
 Contents 
</div>

引用:http://jquerymobile.com/demos/1.2.0-beta.1/docs/content/content-grids.html