自动调整Kendo-Grid高度

Question

我想要自动调整剑道网格的高度，例如底部网格是从窗口底部的20px。

.--------------------. - 
| Navbar             | |
|   .------------.   | |
|   | Kendo-Grid |   | | Window Height
|   |            |   | |
|   '------------'   | |
'--------------------' -

我当前的解决方案使用Javascript：

<div class="container-fluid">
    <div id="grid"></div>
</div>

<script>
    $(window).resize(function() {
        let height = window.innerHeight - $('#grid').offset().top - 20
        $('#grid').css('height', height + 'px')
        $('#grid').data("kendoGrid").refresh()
    })
</script>

我想知道是否有更好的解决方案。

Answer 1

我在这里假设，因为您的布局可能更具体，但您可以尝试以下CSS：

<style>
    .container-fluid {
        height: 100%;
    }
    #grid {
        height: calc(100% - 20px);
    }
</style>

<div class="container-fluid">
    <div id="grid"></div>
</div>