4

私の質問はとても簡単です。しかし、私はググってググってググったのですが、答えが見つかりませんでした。

zurb Foundation 3で簡単なレイアウトを作成しました

<div class="row" id="wcont1">
    <div class="three columns" id="wcont1a">

    </div>
    <div class="six columns" id="wcont1b">

    </div>
    <div class="three columns" id="wcont1c">

    </div>
</div>

wcontb 列に値が入力されたときに、特定のポイント (私が定義) を超えて展開しないようにする必要がありますが、代わりに、上下の矢印アイコンを使用して垂直方向にスクロールできるようにする必要があります。

私は初心者です。詳細な回答と、zurb Foundation 3 を使用した実際の例を高く評価します。

4

1 に答える 1

10

ここには2つの懸念があります。

  1. 中央のdiv（wcont1b）の高さを制限して、特定のポイントに到達したときにコンテンツをスクロールできるようにします。
  2. あなたはそれをするためのきれいな方法が欲しいということ

2つの懸念は別々の問題であることに注意してください。それでは、最初のものに取り組みましょう。ZurbFoundation 3.2.2を使用すると、次のように3つのdivをレイアウトできます。

    <div class="row" id="wcont1">
        <div class="three columns" id="wcont1a">
            <div class="panel">
            Content goes here...
            </div>
        </div>
        <div class="six columns" id="wcont1b">
            <div class="panel">
                <h4>Content goes here...</h4>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>

            </div>
        </div>
        <div class="three columns" id="wcont1c">
            <div class="panel">
            Content goes here...
            </div>
        </div>
    </div>

wcont1bスクロールバーの動作を確認できるようにデータを入力しました。また、サンプルコンテンツをzurb panel（クラスを使用してpanel）中に配置して、divがどのように分離され、スクロールバーがどのように動作するかをよりよく理解できるようにします（2つのアプローチを示します）。

さて、これで中央に背の高いdiv（'wcont1b`）があり、特にモバイルで表示したときにスペースをあまり消費しないように、一定の高さにしたいと思います（個人的には背の高いdivを使用する方が好きですが）特にdivの外側とその下にコンテンツがある場合は、スクロールバー付きの短いもの）。divの高さを制御するには、cssでこれが必要です。

アプローチ＃1

#wcont1b .panel { max-height: 150px; overflow-y: scroll; }

max-height値はの高さ制限でwcont1bあり、要件に応じて変更する必要があります。オーバーフロー-yはスクロールバーを処理するものです。wcont1bタイトルがあり、コンテンツと一緒にスクロールしたくない場合、このアプローチは望ましくありません。したがって、よりきれいにするために、これを行う必要があります：

アプローチ＃2

#wcont1b .panel ul { max-height: 150px; overflow-y: scroll; }

リストだけがスクロールし、ヘッダーが一番上にあることに注意してください。違いは、cssがulコンテンツ全体ではなく、リスト全体をターゲットにしていることwcont1bです。

これで、高さ制御されたdivができました。しかし、スクロールバーの見栄えを良くしたいと思います。そこで、jqueryプラグインが登場します。試してみmillionsたと言っていましたが、コードを表示していないので、実行することが重要です。しかし、とにかくここで取得できるjscrollpaneを使用した例を挙げましょう。必要なファイルをダウンロードしてページで参照したら、次の手順を実行する必要があります。

アプローチ＃1に必要なコード：

<script>
$(window).load(function(){
    $('#wcont1b .panel').jScrollPane();
});
</script>

アプローチ＃2に必要なコード：

<script>
$(window).load(function(){
    $('#wcont1b .panel ul').jScrollPane();
});
</script>

それだけです、それはあなたの問題を解決するはずです。より多くの問題が発生した場合は、できるだけ多くの情報を提供する必要があります。そうすれば、ここの人々があなたをより良く助けることができます。

于 2013-03-18T01:52:59.327 に答える