2

我想在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 左上角的示例（就在标题下方）。滚动时，此边框应保持固定： 示例图片

4

2 回答 2

0

您可以为内容在其后面滚动时保留在其位置上的元素添加边框。

对于这样的示例伪页面：

<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

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

于 2012-11-12T22:31:45.453 回答
0

您需要使#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);
}
于 2012-11-12T22:19:02.703 回答