自动调整Kendo-网格高度

Question

我想自动调整 Kendo- 网格高度，例如底部网格位于 window 底部的 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>

自动调整Kendo-网格高度

Adjust Kendo-Grid height automatically

javascript

kendo-ui

kendo-grid