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