67

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

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

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

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

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

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

4

3 に答える 3

127

スクロールはクラスのあるボックスから来ますpre-scrollable

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

他にも例があります : http://getbootstrap.com/css/#code-block

于 2014-09-03T17:29:53.567 に答える
25

それを行う 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/

更新jQueryアプローチはどうですか。

$(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/

于 2013-10-28T19:01:24.267 に答える