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

您需要在#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);
}

Answer 2

您可以为内容在其后面滚动的元素添加边框。

对于像这样的伪页面示例：

<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

如果您不想要固定的位置页眉或页脚，您只需将元素放置在高度为零且边框为零的位置。