web-dev-qa-db-ja.com

Bootstrap 3テーブルのスクロール可能なdiv

Bootstrap 3を使用していますが、上部にナビゲーションバーがあり、Bootstrap 3のテーブルクラスを使用してフォーマットされたテーブルを表示するページがあります。テーブル（独自のdivにある）がスクロール可能なページの唯一の部分になります（テーブル内のデータの幅/高さがページの幅/高さを超える場合）。次のように、テーブルのdivのスタイルを設定しました。

.mygrid-wrapper-div {
    overflow: scroll;
    height: 200px;
}

これを説明するフィドルがあり、divの周りに5い5px赤い境界線を追加して、スクロール可能にしたい領域を強調表示します。

http://jsfiddle.net/4NB2N/4/

左から右へのスクロールはうまく機能することに注意してください。これを機能させるために何もする必要はありません。また、ウィンドウのサイズが変更されると、divはスクロールバーを自動的に調整します。ただし、divの高さを同じように動作させるように設定する方法がわかりません-200pxの値をハードコーディングしましたが、実際にdivがウィンドウの「残り」を埋めて、ブラウザのサイズが変更されても動作するようにします。

Divを水平方向と垂直方向の両方で同じように動作させるにはどうすればよいですか？

javascriptjquerycsstwitter-bootstrap
61
David McClelland

スクロールは、クラスpre-scrollableのボックスから行われます

<div class="pre-scrollable"></div>

他の例もあります： http://getbootstrap.com/css/#code-block
助けてほしい。

113
itsnikolay

それを行う1つの方法は、体の高さをheightに設定するpageに設定することです。この例では、600pxを実行しました。

次に、wrapperの高さをここでボディのパーセンテージに設定します70%これは、画面全体を埋めないようにテーブルを調整しますが、代わりに指定されたページの高さのパーセンテージを占めるだけです。

body {
   padding-top: 70px;
   border:1px solid black;
   height:600px;
}

.mygrid-wrapper-div {
   border: solid red 5px;
   overflow: scroll;
   height: 70%;
}

http://jsfiddle.net/4NB2N/7/

UpdatejQueryアプローチについてはどうですか。

$(function() {  
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

$( window ).resize(function() {
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

http://jsfiddle.net/4NB2N/11/

25
Trevor

あまりにもstyle = "overflow-y：scroll; height：150px; width：auto;"を使用できますそれは私のために働く

0
Marinpietri