100%高度( dGrid )

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分区的高度，那么它将如下所示(请注意2px的高度)：

​

​

有关另一个示例，请参见Dojo Dgrid - Use remaining space in block