Kendo Grid标头变长的原因是什么

Question

我有一个div，在那之下我有剑道网格。我想给div以100％的高度或自动高度，但是当我给Kendo Grid标头增加长度并关闭该div时，如图所示

但是我想显示这样的视图

我不想为第一个div元素赋予固定值，因为所有细节的项目细节都不相同，因此它必须是自动的。

这是我的CSS和HTML

<style>
#gauge-container {
    text-align: right;
    margin: 0px auto;
    background: transparent url(@Url.Content("~/Content/linear-gauge-container.png")) no-repeat 50% 50%;
    padding: 18px;
    width: 100px;
    height: 300px;
    float:left;
}
.k-gauge {
        height: 300px;
        display: inline-block;
        zoom:1;
    }
@@media(max-width:768px) {
    .div1 {
        overflow:auto;
    }
}
@@media(min-width:768px) {
    .div1 {
        height:100%;
    }
}
</style>

<div class="div1">
        @for (int i = 0; i < tanklist.Count; i++)
        {               
                    <table>
                        <tr>
                            <td><b>Capacity</b></td>
                            <td>:</td>
                            <td><b>@tanklist[i].TnkKapasite.ToString("N0", nf) LT</b></td>
                        </tr>
                        <tr>
                            <td>Fuel</td>
                            <td>:</td>
                            <td>@tanklist[i].StokKod</td>
                        </tr>
                        <tr>
                            <td>Time</td>
                            <td>:</td>
                            <td>@tanklist[i].Time</td>
                        </tr>
                        <tr>
                            <td><b>Fuel Vol.</b></td>
                            <td>:</td>
                            <td><b>@tanklist[i].FuelVolume.ToString("N0", nf) LT</b></td>
                        </tr>
                        <tr>
                            <td>Ullage</td>
                            <td>:</td>
                            <td>@tanklist[i].Ullage.ToString("N0", nf) LT</td>
                        </tr>
                        <tr>
                            <td>Water Vol.</td>
                            <td>:</td>
                            <td>@tanklist[i].WaterVolume.ToString("N0", nf) LT</td>
                        </tr>
                        <tr>
                            <td>Temperature</td>
                            <td>:</td>
                            <td>@tanklist[i].Temperature</td>
                        </tr>
                    </table>
        }
    </div>
    <div style="height:100%;">
        @( Html.Kendo().Grid<Deliveries>()
                                 .Name("grdTank_" + (string)data)
                                 .DataSource(ds => ds
                                 .Ajax()
                                 .Read(r => r.Action("GridBinding", "Dashboards", new { code = data, tip = tip }))
                                 )
                                 .Columns(columns =>
                                 {
                                     columns.Bound(e => e.Tank).Width(80).Title("Tank");
                                     columns.Bound(e => e.StartTime).Width(100).Title("Start Time").ClientTemplate("#= kendo.toString(StartTime, 'dd.MM.yyyy HH:mm:ss') #");
                                     columns.Bound(e => e.EndTime).Width(100).Title("End Time").ClientTemplate("#= kendo.toString(EndTime, 'dd.MM.yyyy HH:mm:ss') #");
                                     columns.Bound(e => e.Fuel).Width(50).Title("Fuel");
                                     columns.Bound(e => e.DeliveredVolume).Width(100).Title("Delivered Volume").ClientTemplate("<div style='text-align:right;'>#= FormatNumber(DeliveredVolume) # LT</div>").Encoded(true);
                                     columns.Bound(e => e.ProductVolumeAfter).Width(100).Title("Product Volume After").ClientTemplate("<div style='text-align:right;'>#= FormatNumber(ProductVolumeAfter) # LT</div>").Encoded(true);
                                 })
                                .Selectable()
                                .Scrollable(scrolling => scrolling.Height("auto"))
                                .Sortable()
                                .Pageable(pageable => pageable
                                .Refresh(true)
                                .PageSizes(true)
                                .ButtonCount(10))
                                .Filterable(filterable => filterable
                                .Extra(false)
                                .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts with")
                                    .Contains("Contains")
                                ))
                                )
                                //.Groupable()
                                .Resizable(config =>
                                {
                                    config.Columns(true);
                                })
                                .Reorderable(config =>
                                {
                                    config.Columns(true);
                                })
                                .ColumnMenu()
        )
    </div>

谢谢

Answer 1

首先，这个答案帮助了我here

我将类名命名为网格，然后我float:left的这两个div在解决问题后使用了clear div。

.div1 {
    float:left;
}
.clear {
    clear:both;
}
.grdTank
{
    width: 100%;
    float:left;
}