如何上下布局div与Kendo Grid并解决自适应高度冲突问题？

Got it, let's resolve this layout problem where your adaptive-height div and Kendo Grid are overlapping when you set .div1 to 100% height. The core issue is that using percentage heights without proper container context causes layout conflicts—Flexbox is the ideal approach here, as it lets elements naturally adapt to available space without fixed heights.

Step-by-Step Solution #

1. Wrap both elements in a flex container: This establishes a vertical layout context where the div takes only the space it needs, and the Grid fills the remaining area.
2. Adjust .div1 for adaptive height: Remove the fixed/percentage height and use flex properties to let it shrink/grow with its content.
3. Configure the Grid container: Make it take the remaining space and add overflow handling for when Grid content is too long.

Modified Code #

Updated CSS

#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; 
}

/* Add a flex container wrapper */
.layout-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Or set to the height of your parent container */
}

/* Adjust div1 for adaptive height */
.div1 {
    flex: 0 1 auto; /* Takes only the space needed for its content */
    overflow: auto; /* Add scroll if content exceeds viewport on small screens */
}

/* Optional: Cap height on small screens to prevent excessive overflow */
@media(max-width:768px) {
    .div1 {
        max-height: 50vh;
    }
}

Updated HTML

<!-- Add the flex wrapper to control vertical layout -->
<div class="layout-wrapper">
    <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="flex: 1 1 auto; overflow: hidden;"> <!-- Grid takes remaining space -->
        @( 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("100%")) <!-- Set Grid to fill its container -->
        .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")
        ))
        )
        .Resizable(config => { config.Columns(true); })
        .Reorderable(config => { config.Columns(true); })
        .ColumnMenu()
        )
    </div>
</div>

Key Explanations #

• .layout-wrapper: Uses flex-direction: column to stack elements vertically. height:100vh makes it take full viewport height—adjust this value if your parent container has a specific height.
• .div1: flex:0 1 auto ensures it only occupies the space required for its dynamic content. The overflow:auto and optional max-height on small screens prevent content from overflowing uncontrollably.
• Grid Container: flex:1 1 auto forces it to fill all remaining space. Combined with the Grid's Scrollable(scrolling => scrolling.Height("100%")), this ensures the Grid's content scrolls instead of overlapping with the top div.

内容的提问来源于stack exchange，提问作者saulyasar