1

divのグループを互いに重ねて配置しようとしています。上部のdivは、左上（幅= 100％）の静的な場所である必要があり、中央のdivの垂直スクロールの影響を受けないようにする必要があります。コンテナdivにも、必要のない垂直スクロールが表示されることを除けば、私はある程度機能します。これで、2つの重なり合う垂直スクロールバーができました。1つはコンテナdiv用で、もう1つは中央用です。また、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>
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 MobileMethods of markup enhancement prevention

于 2013-03-19T09:11:10.900 に答える