2013-01-11 7 views
6

dGridインスタンスがそのコンテナの高さの100%を占めるようにするにはどうすればよいですか?私はCSSを使って ".dgrid"クラスのdivを特定の高さにすることができますが、100%に設定すると表示されません。dGridの100%の高さ

答えて

12

.dgrid { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: auto; 
} 

(当然のコンテナ上の位置、絶対/相対、付)

+3

いくつかの追加の詳細:(http://stackoverflow.com/questions/13427937/dgrid-resizing-within-bordercontainer/13436318#13436318)_Dgrid BorderContainer_内リサイズ];ではないにコンテンツする) – phusick

1

voidstateの答え@良いです。それを行うための別の方法は、このようなものです:

HTML:

<div class="containsDGrid"> 
    <div data-dojo-attach-point="dgrid"></div> 
</div> 

CSS:

.containsDGrid { 
    height: 500px; 
    width: 500px; 
} 

.dgrid { 
    height: 100%; 
    width: 100%; 
} 

キーはあなたが100%、dgridの親にdgridの高さを設定した場合ということですその高さが設定されている必要があります。私がサポートだと思う見Dojo Dgrid - Use remaining space in block

1

enter image description here

別の例:私たちは、それは次のようになります.containsDGridのdivの高さを設定しない場合、例えば、(2ピクセルの高さに注目してください)これを行う方法は.dgrid-autoheight cssクラスです。

 require([ 
      "dgrid/List", 
      "dgrid/OnDemandGrid", 
      "dgrid/Selection", 
      "dgrid/Keyboard", 
      "dojo/_base/declare", 
      "dgrid/test/data/createAsyncStore", 
      "dgrid/test/data/smallColorData", 
      "dojo/domReady!" 
     ], function(List, Grid, Selection, Keyboard, declare, createAsyncStore, smallColorData){ 
       window.grid = new (declare([Grid, Selection, Keyboard]))({ 
        className: "dgrid-autoheight", 
        collection: createAsyncStore({ data: smallColorData }), 
        columns: { 
         col1: "Color", 
         col5: "R", 
         col6: "G", 
         col7: "B" 
        } 
       }, "grid"); 
      }); 

これはtest examplesからのものです。

+0

dgrid-auroheightリサイズグリッドコンテナ –