Css 在智能手机浏览器上垂直排列具有可滚动中心div的div

我正试着把一组div排在彼此的上面。顶部div必须固定在左上角（宽度=100%），且不受中间div的垂直滚动的影响。我的工作方式有点像我想要的，除了container div还有一个我不想要的垂直滚动条。现在我有两个重叠的垂直滚动条，一个用于容器div，一个用于中心。如果可以帮助我安排div，我也会在页面上使用jquerymobile

如何使我的中心div（id=scroll）成为唯一可滚动的div，并使我的顶部div（id=fixed）位于固定位置，而无需滚动条（垂直滚动条没有重叠）且不受页面滚动的影响

<div id="conatainer" style="overflow: hidden; height: 100%">


    <div id="fixed" style="position: static; top: 0%; overflow: hidden; height: 50%">

        <div id="map_canvas" style="width:100%; height: 85% ;min-height: 180px">

        ...

    </div>  


    <div id="scroll" style="position: absolute; overflow: auto; overflow-x: hidden; height: 50%">

    ...

    </div>

</div>

...
...

这是一个标准的

jQuery Mobile

模板，具有固定的标题和滚动的内容：

首页

下面是一个有效的例子：

要修复标头，它需要

数据位置=“fixed”

属性

---

另外，如果您希望只使用布局而不使用

样式，请查看此或找到它：搜索章节：

标记增强预防方法
这是标准的
jQuery移动版带有固定标题和滚动内容的模板：


首页

下面是一个有效的例子：

要修复标头，它需要
数据位置=“fixed”属性

另外，如果您只想使用布局而不想
jQuery Mobile样式，请查看此或找到它：搜索章节：
标记增强预防方法
，为什么不让jQuery Mobile为您做呢？如果我如果我知道怎么做，我就不会发帖了。谢谢你的提示；）。你为什么不让jQuery Mobile帮你做呢？如果我知道怎么做，我就不会发帖了。谢谢你的提示；）。我使用的是使用jQuery Mobile的xhtml（Primeface Mobile 0.9.3）。如何添加非标准的“data role”和“data position”属性？在这种情况下，什么是非标准的“data role”和“data position”属性？可能只有我的编辑器无法识别这些属性，将添加它们并查看结果。这是您的编辑器。他们中的很多人不知道如何检测现代HTML5数据和aria属性。在fiddle示例中，我只是添加了
data position=“fixed”
以使“首页”标题保持静态。是吗？我使用的是xhtml（Primeface Mobile 0.9.3），它使用的是jQuery Mobile。如何添加非标准的“data role”和“data position”属性？在这种情况下，什么是非标准的“data role”和“data position”属性？可能只有我的编辑器无法识别这些属性，将添加它们并查看结果。这是您的编辑器。他们中的很多人不知道如何检测现代HTML5数据和aria属性。在fiddle示例中，我只是添加了
data position=“fixed”
以使“首页”标题保持静态。正确的？
<div data-role="page" id="index">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>