dGrid中的100％高度

Question

如何使dGrid实例占据其容器高度的100％？我可以使用CSS将“.dgrid”分类div设置为特定高度，但是当我将其设置为100％时，它不会显示。

Answer 1

知道了。

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

（当然，在容器上有绝对/相对位置）

Answer 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。

Answer 3

@ 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