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

Question

我正在尝试在 jquery Mobile 中构建一个网格，为了示例的目的，它类似于数字键盘。

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

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

谁能告诉我为什么会发生这种情况，以及如何拉伸(stretch)网格以占据可用高度的 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%;
}