Dojo Dgrid - 使用块中的剩余空间

Question

我有一个这样的块：

<div class="container">
    <div class="someStuff">Some stuff of unknown height</div>
    <div class="myDGrid" data-dojo-attach-point="dgrid"></div>
</div>

DGrid 是这样启动的：

new (declare([OnDemandGrid, DijitRegistry]))({
    store: ...,
    columns: ...
}, this.dgrid);

要求：

• 容器块有一些高度。
• someStuff 块的高度是动态设置的。

myDGrid 块包含一个 Dojo DGrid。它应该使用容器中剩余的空间。例如：

• 如果 container 是 400px 而 someStuff 是 200px 那么 myDGrid 应该是 200px。
• 如果 container 是 300 像素，而 someStuff 是 someStuff 是 10 像素，那么 myDGrid 应该是 290 像素。

如果无法显示所有行，则 dgrid 应该有滚动条。

最好的方法是什么？

Answer 1

一种解决方案是将 html 更改为：

<div class="container">
    <div class="someStuff">Some stuff of unknown height</div>
    <div class="containsDGrid">
        <div class="myDGrid" data-dojo-attach-point="dgrid"></div>
    </div>
</div>

然后像这样使用 CSS：

.container {
    display: table;
}
.someStuff {
    display: table-row;
}
.containsDGrid {
    display: table-row;
    height: 100%;
}
.dgrid {
    width: 100%;
    height: 100%;
}
.dgrid .dgrid-scroller {
    overflow-y: auto;
    overflow-x: hidden;
}