SlickGrid 网格大小与显示：表

Question

我有一个静态尺寸的盒子。在框中，我有一个 slickgrid 实例和一些显示在底部的临时内容。我希望网格的垂直大小能够很好地流动，以便所有临时内容都显示在底部，而无需调整父框的大小。

我已经在 div 上使用 display: table; 和 display: table-row; 完成了这项工作。

Fiddle Here：在添加网格之前切换内容，看看我想要它做什么。单击“添加网格”以初始化网格并导致问题。

当容器使用display: table; 时，SlickGrid 似乎无法正确调整自身大小。它在水平方向上变得太大，并且在调用 grid.resizeCanvas() 时似乎变大了。

如果您从#table 和#tallRow 中删除表格显示，则网格本身的大小会正确。但是，切换内容并不能正确地垂直收缩网格。在调用 grid.resizeCanvas() 之前，我可以在 JS 中手动调整容器大小，但是 table/table-row 解决方案非常优雅，我想保留它。

有什么想法吗？

HTML

<button id="add" onclick="addGrid()">Add Grid</button><button onclick="toggle()">Toggle Content</button>
<div id="box">
    <div id="table">
        <div id="tallRow">
            <div id="grid"></div>
        </div>
        <div id="tempRow">
            <div id="test">Some content</div>
        </div>
    </div>
</div>

CSS

html {
    background: #444;
    color: #fff;
}

#box {
    background: #666;
    width: 350px;
    height: 500px;
    padding: 5px;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
}

#tallRow {
    height: 100%;
    display: table-row;
}

#grid {
    width: 100%;
    height: 100%;
    background: #777;
    border: 1px solid black;
    box-sizing: border-box;
}

#tempRow {
    display: none;
}

Javascript

function toggle() {
    var el = document.getElementById('tempRow');
    el.style.display = el.style.display == 'table-row' ? 'none' : 'table-row';
    grid.resizeCanvas();
}

var grid;
var columns = [
    {id: "title", name: "Title", field: "title"}
];

var options = {
    fullWidthRows: true,
    forceFitColumns: true,
    enableColumnReorder: false
};

function addGrid() {
    var data = [];
    for (var i = 0; i < 500; i++) {
        data[i] = {
            title: "Task " + i
        };
    }

    grid = new Slick.Grid("#grid", data, columns, options);
    document.getElementById('add').style.display = 'none';
}

Answer 1

您必须使用：table-layout:fixed; 到 <table> 或 display:table; 元素，这样如果指定了宽度，它就不会再收缩/扩展。 DEMO

#table {
    width: 100%;
    height: 100%;
    display: table;
    table-layout:fixed;
}