Question

我正在尝试将一组div组合在一起。顶部div必须是左上角的静态位置（宽度= 100％），并且不受中心div将具有的垂直滚动的影响。我的工作有点像我想要的，除了容器div还有一个我不想要的垂直滚动。现在我有两个重叠的垂直滚动条，一个用于容器div，另一个用于中心。我也在页面上使用JQuery mobile，如果这可以帮助我安排div。

如何让我的中心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>

Answer 1

这是一个标准的 jQuery Mobile 模板，其中包含固定标题和滚动的内容：http://jsfiddle.net/Gajotres/yWTG2/

<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>

这是一个有效的例子：http://jsfiddle.net/Gajotres/Rf7NA/

要修复标题，需要 data-position="fixed" 属性。

如果您想要仅使用布局而非 jQuery Mobile 样式，请查看此 ARTICLE 或找到 HERE ：搜索章节： Methods of markup enhancement prevention 。

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

1 个答案: