我有一个这样的 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 应该有滚动条。
执行此操作的最佳方法是什么?
最佳答案
一种解决方案是将 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;
}
关于css - Dojo Dgrid - 使用 block 中的剩余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24396814/