100% Chiều cao trong dGrid

Question

Làm cách nào để tạo một trường hợp dGrid chiếm 100% chiều cao của vùng chứa? Tôi có thể sử dụng CSS để làm cho ".dgrid" phân loại div một chiều cao cụ thể nhưng khi tôi đặt nó đến 100% nó không hiển thị.

Answer 1

OK.

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

(Với vị trí tuyệt đối/tương đối trên container, tất nhiên)

Answer 2

@ câu trả lời voidstate là tốt. Một cách khác để làm điều đó là như thế này:

HTML:

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

CSS:

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

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

Mấu chốt ở đây là nếu bạn thiết lập chiều cao của dgrid đến 100%, phụ huynh của dgrid phải có thiết lập cao của nó. Ví dụ, nếu chúng ta không thiết lập chiều cao của .containsDGrid div sau đó nó sẽ giống như thế này (chú ý chiều cao của 2px):

Ví dụ khác thấy Dojo Dgrid - Use remaining space in block

Answer 3

Tôi nghĩ rằng được hỗ trợ cách để thực hiện điều này là với lớp css .dgrid-autoheight.

 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"); 
      }); 

Đây là từ test examples.