dGrid中的100％高度

Question

如何使dGrid實例佔用其容器高度的100％？我可以使用CSS將「.dgrid」分類爲特定的高度，但是當我將其設置爲100％時，它不會顯示。

Answer 1

明白了。

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

（隨着集裝箱位置絕對/相對，當然）

Answer 2

@ voidstate的回答是好。另一種方式來做到這一點是這樣的：

HTML：

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

CSS：

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

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

的關鍵是，如果你的dgrid的高度設置爲100％時，dgrid的父必須有它的集合。例如，如果我們不設置.containsDGrid div的高度，然後它就會像這樣（注意2px的高度）：

再比如看Dojo Dgrid - Use remaining space in block

Answer 3

我覺得支持這樣做的方式是與.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。