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

Question

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

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

但是，它似乎不起作用（小提琴）。检查元素，该content部分似乎忽略了height: 100%（page包装器确实具有完整尺寸）。但我似乎找不到原因。

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

看来这个问题是关于同一个问题，但在那里找不到答案。

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%;
}