Adjust Kendo-Grid height automatically

Question

I would like to adjust the Kendo-Grid height automatically such as the bottom grid is at 20px from the bottom of the window.

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

My current solution uses 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>

I am wondering if there is a better solution.

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>