如何固定MudBlazor/MudTable高度 使分页Footer锚定容器底部？

问题描述 #

使用MudBlazor时，需要实现以下效果：

• 固定MudTable的整体高度
• 当搜索结果行数小于分页设置值时，分页Footer锚定在容器底部，不会随表格内容收缩而上移
• 避免直接设置MudTable的Height属性导致用户修改分页大小时强制出现滚动条

解决方案：重写CSS实现固定布局 #

可以通过CSS Grid布局改造MudTable的内部结构，让表格内容区域自动填充剩余空间，Footer固定在容器底部。具体步骤如下：

1. 添加自定义CSS样式 #

在项目全局CSS文件（如wwwroot/css/app.css）中添加以下样式：

/* 自定义固定Footer的表格样式 */
.fixed-footer-table .mud-table-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 500px; /* 根据需求设置固定高度，也可用相对值如 calc(100vh - 200px) */
}

.fixed-footer-table .mud-table-body {
    overflow-y: auto; /* 内容超出时显示滚动条 */
}

2. 修改MudTable组件代码 #

给MudTable添加自定义Class，移除原有的Height属性：

<MudTable Elevation="1" Striped="false" Bordered="true" Hover="true" 
          Items="@data" T="CountriesDetail" Filter="new Func<CountriesDetail,bool>(SearchFunction)"
          Class="fixed-footer-table"> <!-- 添加自定义Class -->
    <ToolBarContent>
        <MudText Typo="Typo.h6" Color="Color.Primary">Countries</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="searchString" Immediate="true" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <NoRecordsContent>
        <MudText Typo="Typo.body1" Class="mud-text-secondary mt-6 mb-4">No data to display</MudText>
    </NoRecordsContent>
    <ColGroup>
       <col style="width: 100%" />
    </ColGroup>
    <HeaderContent>
        <MudTh>Country Name</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Name">@context.CountryName</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager/>
    </PagerContent>
</MudTable>

3. 对话框场景适配（可选） #

如果表格放在对话框中，需要给DialogContent设置合适的高度，避免内容溢出：

<MudDialog>
    <TitleContent>
        <MudText>Country Search</MudText>
    </TitleContent>
    <DialogContent Style="height: 500px; overflow: hidden;"> <!-- 设置对话框内容区高度 -->
            <TableDef></TableDef>
    </DialogContent>
    <DialogActions>
    </DialogActions>
</MudDialog>

效果说明 #

• 当表格行数小于分页设置值时，分页Footer会固定在容器底部，表格内容区自动填充剩余空间
• 当表格行数超过容器高度时，内容区域会出现垂直滚动条，Footer依然保持在底部
• 修改分页大小后，只有当内容实际超出容器高度时才会显示滚动条，不会强制出现不必要的滚动

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