css - Dojo Dgrid: usa el espacio restante en el bloque

Question

Tengo un bloque como este:

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

DGrid se inicia así:

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

Requisitos:

• El bloque contenedor tiene algo de altura.
• El bloque someStuff tiene una altura que se establece dinámicamente.

El bloque myDGrid contiene un Dojo DGrid. Debe usar el resto del espacio en el contenedor. Por ejemplo:

• Si el contenedor es 400px y someStuff es 200px, entonces myDGrid debería ser 200px.
• Si el contenedor es 300px y someStuff es algoStuff es 10px, entonces myDGrid debería ser 290px.

La cuadrícula debe tener barras de desplazamiento si no se pueden mostrar todas las filas.

¿Cuál es la mejor manera de hacer esto?

Answer 1

Una solución es cambiar el html a esto:

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

Y luego usa CSS así:

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