JQueryMobile 包装 data-role="content" div

Question

我想在 data-role="content" 元素周围显示一些静态边框。

<div data-role="page" id="moodle" data-add-back-btn="true">
    <div data-role="header"><h1>MyPage</h1></div>
    <div data-role="content">
        Some Content
    </div>
</div>

为了实现这一点，我目前将我的页面内容包装在一堆 div 中，这些 div 通过 css 创建边框。这些 div 仅在顶部和左侧有边框。

$(document).bind("ready",function(){
$('div[data-role="content"]').each(function(k,v){
    $(v).wrap('<div class="b1"/>');
    $(v).wrap('<div class="b2"/>');
    $(v).wrap('<div class="b3"/>');
    $(v).wrap('<div class="b4"/>');
    $(v).wrap('<div class="content"/>');
});

问题是，当滚动内容时，顶部边框会随着它滚动出视口/标题后面而消失。那么如何将data-role="content"-div “包装”到我的其他 div 中，以确保在内容滚动时边框保持固定？

编辑： 内容 div 左上角的示例（就在标题的正下方）。滚动时，此边框应保持固定：

Answer 1

您可以为元素添加边框，这些元素在内容在其后面滚动时保持在其位置。

例如这样的伪页面：

<div data-role="page">
    <div data-position="fixed" data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        <p>Content</p>
    </div>
    <div data-position="fixed" data-role="footer">
        <h2>Footer</h2>
    </div>
</div>​

可以应用这样的 CSS：

.ui-page .ui-header {
    box-sizing    : border-box;
    border-bottom : 4px solid red;
}
.ui-page .ui-footer {
    box-sizing : border-box;
    border-top : 4px solid red;
}
.ui-mobile .ui-page {
    box-sizing   : border-box;
    border-left  : 4px solid red !important;
    border-right : 4px solid red !important;
}

在页眉底部、页脚顶部和内容区域的左侧/右侧放置边框。

box-sizing : border-box; 声明是为了使计算不那么复杂（它包括元素的高度/宽度尺寸内的边框/填充）。

这是一个演示：http://jsfiddle.net/2M5Jc/

box-sizing 的文档：https://developer.mozilla.org/en-US/docs/CSS/box-sizing

如果您不想要一个固定位置的页眉或页脚，您可以在它们的位置放置一个零高度和边框的元素。

Answer 2

你需要让#content里面的内容可以滚动

http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications

这样你的边框将保持在原来的位置，但里面的内容会滚动

更新 - 示例：

<div data-role="page" id="moodle" data-add-back-btn="true">
    <div data-role="header"><h1>MyPage</h1></div>
    <div data-role="content" class="scrollable">
        Some Content
    </div>
</div>


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

.scrollable {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

/* iOS specific fix, don't use it on Android devices */
.scrollable > * {
    -webkit-transform: translateZ(0px);
}