Jquery mobile jquerymobile中的粘性左列

在jquery mobile中是否可以完成以下任务

我有一个网格

导航树
具有50多行的数据表

当表格中的数据过多时，应显示滚动条并 block-b应可滚动，其中block-a应始终保持粘性 以便导航保持在原位

---

在jquery mobile中有可能实现这种行为吗？

因为两个网格块共享50%的宽度，通过将块a设置为固定位置，将块b设置为向右浮动，很容易实现

演示

---

cytasos给出了一个很好的答案！如果您确实希望ui-block-b是可滚动的，您可以这样做：

首先缩放ui内容div以填充设备/屏幕高度：

function ScaleContentToDevice() {
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

$(document).on("pagecontainershow", function () {
    ScaleContentToDevice();
});

$(window).on("resize orientationchange", function () {
    ScaleContentToDevice();
});

接下来，在CSS中将网格高度设置为100%，将block-b div设置为100%高度和溢出：

.ui-grid-a {
    height: 100%;
}
.ui-block-b {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

---

@cytasos，谢谢，我喜欢你的解决方案，因为它更简单，我从来没有想过：）thx很多这真的是另一种很酷的方式！！！问题是导航是一棵树，它可能比屏幕大，这意味着它也应该是可滚动的@AndreasZeiner，没问题，只需使左侧块也可滚动：

function ScaleContentToDevice() {
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

$(document).on("pagecontainershow", function () {
    ScaleContentToDevice();
});

$(window).on("resize orientationchange", function () {
    ScaleContentToDevice();
});

.ui-grid-a {
    height: 100%;
}
.ui-block-b {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}