css - Dojo Dgrid - 使用 block 中的剩余空间

Question

我有一个这样的 block :

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

要求:

• 容器 block 有一定的高度。
• someStuff block 有一些动态设置的高度。

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

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

如果不能显示所有行，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;
}