dGrid의 100 % 높이

Question

dGrid 인스턴스가 컨테이너 높이의 100 %를 차지하게하는 방법은 무엇입니까? CSS를 사용하여 ".dgrid"div를 특정 높이로 만들 수 있지만 100 %로 설정하면 표시되지 않습니다.

Answer 1

알 수 있습니다.

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

는 voidstate의 대답 @

Answer 2

(물론 용기에 위치 절대적/상대적으로) 좋다. 그것을 할 수있는 또 다른 방법은 다음과 같이이다 :

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의 부모가 그것의 hight 세트가 있어야합니다. 내가 지원하는 생각을 참조 Dojo Dgrid - Use remaining space in block

Answer 3

을

또 다른 예를 들어 우리가 다음은 다음과 같이됩니다 .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에서입니다.