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

这是来自测试示例。

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 的父级必须设置其高度。例如，如果我们不设置.containsDGriddiv 的高度，那么它将如下所示（注意 2px 的高度）：

有关另一个示例，请参阅Dojo Dgrid - 使用块中的剩余空间