2

jQuery モバイル アプリでサイドバー ツールボックスを作成するのに問題があります。

次のようなレンダリングが必要です: http://www.paultrifa.com/envato/themeforest/side/red/preview/左ナビゲーションバーが固定されています。ドキュメントで、ヘッダーとフッターにネイティブの「固定」機能があることを確認しましたが、私のニーズに合ったものをすぐに見つけることができません。

グリッド システム (PIXEL で固定サイズのもの - ツールボックス用) と他の部分 (ページのコンテンツ) をレスポンシブでテストしましたが、非常にバグがあります。

また、コードをどのように構成する必要がありますか? 最善の方法は、サイドバーの HTML コードをページ コンテナーの外に配置することですが、いくつか問題があります。

私は基本的なCSSで試しました：

.sidebar{
    display:inline-block;
    width:47px;
    float:left;
    height:100%;
    position:fixed;
    background-image:url(images/sidebar-bg.png);
}

動作しますが、ページのコンテンツがトリミングされます。「ページ」コンテナの幅のサイズを変更する必要がありますが、パネルのサイズはピクセル単位であるため、別の問題があります...

誰かにヒントがあれば、それは素晴らしいことです！

編集 ：

完全なコード:

<div data-role="page" data-theme="a">

    <!-- header -->
    <div data-role="header">

    </div> <!-- /header -->

    <!-- content -->
    <div data-role="content">

        <div class="ui-grid-b my-breakpoint">
            <div class="ui-block-a">
                <div class="sidebar">   
                    <!-- SIDEBAR CONTENT -->
                </div>
            </div>
            <div class="ui-block-b">
                {% block body %}
                {% endblock %}
            </div>
        </div>

    </div> <!-- /content -->

    <!-- footer -->
    <div data-role="footer">

    </div><!-- /footer -->

</div><!-- /page -->

ここでの私の問題は、ツールバーがヘッダーとフッターの間にあることです...

4

2 に答える 2

0

これは必要ないと思いますが、左側に配置する必要がありfloatます。absolutely position次に、ページの残りの部分をその周りに埋める必要があります。これ以上のコードやリンクがなければ、例を挙げることはできませんが、私のドリフトを理解できるはずです。

于 2013-10-08T12:01:13.350 に答える