javascript - jQuery Mobile Div 在顶部

Question

有点奇怪的要求，我知道。

我有一个 jQueryMobile 页面，你可以看到一个简单的页面：

    <div data-role="page" class="type-home"  id="home">
        <div data-role="header" data-theme="b">
            <h1>Our Tools</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview">
        ......

我需要在 jQuery Mobile 使用的任何样式或 div 之外的最顶部放置一个包含 100 px 高内容的 div。

这将如何完成，因为添加一个普通的 Div 只是被 jQuery Mobile 覆盖。

我不能使用 iFrame，它必须全部在 html 中的一个页面上。

Answer 1

如果你想要一个静态标题类型的 DIV，这对我有用。我放置了一个具有固定高度的“标题”，然后使用如下边距顶部偏移“内容”。.ui-content 是 jQM 自动添加的一个类。

HTML：

<div data-role="page" id="somePage">
        <div class="ui-bar ui-bar-b">
            <a data-role="button" href="#main" data-transition="none" data-theme="a"></a>
            <h1>Some header</h1>

        </div>
        <div data-role="content">
            <div id="someDiv">
                </div>
        </div>
    </div>

CSS：

.ui-bar {
    position: fixed;
    height: 100px;
    z-index: 10000;
    width: 100%;
    padding: 0px 5px;
    box-sizing: border-box;
}

.ui-content {
    position: relative;
    padding: 10px;
    margin-top: 100px;
}