asp.net-mvc - 设置剑道网格高度以匹配其容器

Question

我有一个剑道网格:

<section class="main-window">

    @model IEnumerable<SustIMS.Models.ModelTest>

    <div class="clear-both">

        <div class="field-value" style="height: 30px; border-bottom: 1px solid black">

        </div>

        <div id="datagrid">
            @(Html.Kendo().Grid(Model)
                .Name("datagrid_Concessoes")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Id).Width(70);
                    columns.Bound(c => c.Code);
                    columns.Bound(c => c.Description);
                    columns.Bound(c => c.CreationDate);
                    columns.Bound(c => c.CreationUser);
                })
                .Scrollable()
                .Sortable()
                .Selectable()
                .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("GetAutoEstradas", "MasterData"))
                )
            )
        </div>

    </div>
</section>

这是 CSS 部分:

.main-window
{
    border: 2px solid gray;
    border-radius: 2px;
    width: 95%; height: 70%;
    background-color: White;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    box-sizing: border-box;
}

我希望 Kendo 网格具有其容器的高度。我试过了

.Scrollable(s => s.Height(200))

但它只接受以像素为单位的值，而不是以百分比为单位。

如何设置 Kendo 网格以适合其容器 div/section？

PS:我查过 this question但没有为我找到解决方案

Answer 1

删除 .Scrollable()方法。 Scrollable()在网格上强制固定高度。