自动调整剑道网格的高度

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

I'm assuming here, as your layout might be more specific, but you can try this CSS:

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

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