Syncfusion滚动Div内Grid表头冻结问题咨询（Razor视图）

这问题我熟，刚好之前做过类似的需求，完全可以靠CSS实现，而且不用给Grid设固定高度，全靠媒体查询控制容器高度就行。给你一步步拆解：

1. 先重构Grid的HTML结构：拆分表头与内容区 #

要实现表头冻结，核心是把表头和可滚动的内容区域拆成独立模块，这样才能单独控制表头的固定效果。在Razor视图里可以这么写（如果用第三方Grid组件，也要找到拆分表头/内容的方式）：

方案1：用CSS Grid模拟表格（灵活性更高）

<div class="grid-wrapper">
    <!-- 固定表头 -->
    <div class="grid-header">
        <div class="grid-col">用户ID</div>
        <div class="grid-col">用户名</div>
        <div class="grid-col">注册时间</div>
    </div>

    <!-- 可滚动的内容区（高度由媒体查询控制） -->
    <div class="grid-content-scroll">
        @foreach(var item in Model.UserList)
        {
            <div class="grid-row">
                <div class="grid-col">@item.Id</div>
                <div class="grid-col">@item.Name</div>
                <div class="grid-col">@item.CreateTime.ToString("yyyy-MM-dd")</div>
            </div>
        }
    </div>

    <!-- 底部4个按钮 -->
    <div class="grid-footer">
        <button type="button" class="btn">新增</button>
        <button type="button" class="btn">编辑</button>
        <button type="button" class="btn">删除</button>
        <button type="button" class="btn">导出</button>
    </div>
</div>

方案2：用原生<table>结构（适合传统表格场景）

<div class="table-wrapper">
    <!-- 单独的表头表格 -->
    <table class="grid-table">
        <thead class="grid-header">
            <tr>
                <th>用户ID</th>
                <th>用户名</th>
                <th>注册时间</th>
            </tr>
        </thead>
    </table>

    <!-- 可滚动的内容表格容器 -->
    <div class="table-content-scroll">
        <table class="grid-table">
            <tbody>
                @foreach(var item in Model.UserList)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.Name</td>
                        <td>@item.CreateTime.ToString("yyyy-MM-dd")</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    <!-- 底部按钮区 -->
    <div class="grid-footer">
        <button type="button" class="btn">新增</button>
        <button type="button" class="btn">编辑</button>
        <button type="button" class="btn">删除</button>
        <button type="button" class="btn">导出</button>
    </div>
</div>

2. 写CSS实现冻结效果 + 媒体查询控制高度 #

核心逻辑：让表头固定在顶部，内容区垂直滚动，所有高度控制都集中在内容滚动容器上，媒体查询只修改这个容器的高度，完全不碰Grid本身的高度。

对应方案1的CSS：

/* 外层容器 */
.grid-wrapper {
    width: 100%;
    border: 1px solid #eee;
}

/* 表头与内容行的列布局（保证列宽完全对齐） */
.grid-header, .grid-row {
    display: grid;
    grid-template-columns: 120px 180px 150px; /* 按实际列数/宽度调整 */
}

.grid-col {
    padding: 10px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* 表头固定：用sticky定位，top=0 */
.grid-header {
    position: sticky;
    top: 0;
    background-color: #fff; /* 必须设背景色，避免滚动时内容透出来 */
    z-index: 10;
    font-weight: bold;
}

/* 内容滚动容器：默认基础高度，媒体查询覆盖 */
.grid-content-scroll {
    overflow-y: auto;
    height: 350px; /* 基础高度，可根据需求调整 */
}

/* 底部按钮区 */
.grid-footer {
    padding: 12px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* 媒体查询：不同分辨率下调整滚动容器高度 */
@media (max-width: 768px) {
    .grid-content-scroll {
        height: 220px;
    }
}

@media (min-width: 1200px) {
    .grid-content-scroll {
        height: 450px;
    }
}

对应方案2的CSS：

.table-wrapper {
    width: 100%;
    border: 1px solid #eee;
}

/* 固定列宽，避免表头和内容列错位 */
.grid-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.grid-header th {
    padding: 10px;
    border: 1px solid #eee;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: bold;
}

.table-content-scroll {
    overflow-y: auto;
    height: 350px; /* 基础高度 */
}

.table-content-scroll td {
    padding: 10px;
    border: 1px solid #eee;
}

.grid-footer {
    padding: 12px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* 媒体查询同样作用于滚动容器 */
@media (max-width: 768px) {
    .table-content-scroll {
        height: 220px;
    }
}

@media (min-width: 1200px) {
    .table-content-scroll {
        height: 450px;
    }
}

3. 关键注意事项 #

• 列宽必须对齐：不管用CSS Grid还是<table>，一定要保证表头和内容区的列宽完全一致，不然滚动时会出现列错位的问题（grid-template-columns或table-layout: fixed是关键）。
• 表头必须设背景色：否则滚动时内容会透过表头显示，严重影响体验。
• 只控制滚动容器高度：所有媒体查询都只修改grid-content-scroll或table-content-scroll的高度，完全不用给Grid本身设高度，完美符合你的需求。

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