jquery - CSS レスポンシブ ブートストラップ DIV の高さ

Question

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12" id="header">
            </div>
        </div>
        <div class="row-fluid">
            <div class="span10" id="body">
            </div>
            <div class="span2">
                <div class="row-fluid">
                    <div class="span12" id="updates">
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12" id="chat">
                    </div>
                </div>
            </div>
        </div>
    </div>

これは、ロード時に JQuery で動的に入力する基本構造のコードです。2行目の流体がページの高さを超えないようにしたいのですが、ページにyスクロールバーを表示させたくありません。cssで教えてください。

Answer 1

y スクロール バーは、に入力するデータによって異なりますrow-fluid。スクロールバーを削除するには、スタイルを適用できます。

max-height:500px;
overflow:hidden; 

あなたの秒にrow-fluid。

ただし、余分なコンテンツは非表示になります。

このフィドルを確認してください。

Answer 2

CSS と Jquery なしでインターフェイスを再生成するのは難しいですが、高さがブラウザーのビュー ポートの高さを超えないようにする必要があると思います。右側のパネルを別のクラスに指定できます。つまり.right-panel、CSS3vh値で max-height を配置できます。したがって、次のようになります。

.right-panel{
height: 100vh;
}

それが役立つことを願っています。