自動調整劍道網格高度

Question

我想自動調整劍道網格高度，例如底部網格距離窗口底部 20 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>