jQuery Mobile - 具有相对高度的内容网格

Question

我正在尝试在jquery mobile中构建一个网格，出于一个例子的目的，它类似于数字键盘。

我想要的是网格占据页面高度的给定百分比（例如75％）。我的尝试是将content部分延伸到height: 100%，将实际网格延伸到height: 75%，然后将每个块延伸到height: 20%（因为它是5行）。

然而，doesn't seem to work (fiddle)。检查元素时，content部分似乎忽略了height: 100%（page包装器确实具有完整大小）。但我似乎无法找到原因。

有人能指出为什么会发生这种情况以及我如何拉伸网格以占据可用高度的75％？

this问题似乎是同一个问题，但在那里找不到答案。

Answer 1

工作示例：http://jsfiddle.net/Gajotres/Q2ABZ/

<强> CSS：

div[data-role="content"] {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

div.ui-grid-b {
    height: 75%;
}

.ui-block-a, .ui-block-b, .ui-block-c {
    height: 20%;
}