如何用MudBlazor实现顶部底部固定ToolBar+中间滚动内容布局

直接上可运行的完整代码，核心用CSS Flex布局实现需求：

<MudDrawer Open="true" Fixed="true" Width="320px">
    <DrawerContent>
        <!-- 外层容器：垂直Flex布局，占满Drawer高度 -->
        <div style="display: flex; flex-direction: column; height: 100%;">
            <!-- 顶部A元素：Secondary配色工具栏，固定不收缩 -->
            <MudToolBar Color="Color.Secondary" Style="flex-shrink: 0;">
                <MudIcon Icon="@Icons.Material.Filled.Menu" />
                <MudSpacer />
                <MudTypography Variant="Variant.h6">顶部工具栏</MudTypography>
                <MudSpacer />
                <MudIconButton Icon="@Icons.Material.Filled.Close" />
            </MudToolBar>

            <!-- 中间B元素：可滚动容器，占满剩余空间 -->
            <div style="flex-grow: 1; overflow-y: auto; padding: 16px;">
                @* 示例滚动内容，实际替换成你的业务内容 *@
                @for (int i = 1; i <= 50; i++)
                {
                    <MudCard Margin="Margin.Bottom">
                        <MudCardContent>
                            <MudTypography>滚动内容项 @i</MudTypography>
                        </MudCardContent>
                    </MudCard>
                }
            </div>

            <!-- 底部C元素：固定底部工具栏，不收缩 -->
            <MudToolBar Style="flex-shrink: 0; border-top: 1px solid rgba(0,0,0,0.12);">
                <MudIconButton Icon="@Icons.Material.Filled.Add" />
                <MudSpacer />
                <MudIconButton Icon="@Icons.Material.Filled.Delete" />
                <MudIconButton Icon="@Icons.Material.Filled.Edit" />
            </MudToolBar>
        </div>
    </DrawerContent>
</MudDrawer>

关键实现细节： #

• 外层容器必须设置height: 100%，确保它填满Drawer的全部可用高度，同时用flex-direction: column指定垂直方向的Flex布局。
• 顶栏和底栏的MudToolBar添加flex-shrink: 0，保证它们不会被中间滚动区域挤压，始终保持自身高度。
• 中间滚动容器用flex-grow: 1抢占所有剩余空间，overflow-y: auto让内容超出时自动显示垂直滚动条，滚动时顶栏和底栏不会跟着动。
• 给底部工具栏加了border-top，是为了视觉上和中间内容区分开，你可以根据自己的UI需求调整或去掉。

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