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

本文介绍了Dojo Dgrid - 在块中使用剩余空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这样的块：

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

DGrid以如下方式启动：

The DGrid is started like this:

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

要求：

容器块有一定高度。

someStuff块有一些动态设置的高度。

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

The myDGrid block contains a Dojo DGrid. It should use the remainder of the space in container. For example:

如果container是400px，someStuff是200px，那么myDGrid应该是200px。

如果container为300px，someStuff为someStuff为10px，则myDGrid应为290px。

如果不能显示所有行，dgrid应该有滚动条。

The dgrid should have scrollbars if all rows cannot be shown.

这是最好的方法是什么？

What is the best way to do this?

推荐答案

解决方案是将html更改为：

One solution is to change the html to this:

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

这篇关于Dojo Dgrid - 在块中使用剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！