1

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

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

1 回答 1

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样式，请查看这篇文章或在此处找到它：搜索章节：Methods of markup enhancement prevention。

于 2013-03-19T09:11:10.900 回答