MudBlazor页面布局异常咨询：滚动条与高度适配问题

问题1：垂直滚动条与高度分配异常 #

原因 #

vh 是基于浏览器视口高度计算的，但你的布局顶部存在 MudAppBar，它会占据一部分垂直空间。你设置的 90vh + 10vh = 100vh 是视口总高度，叠加AppBar的高度后，整体内容会超出视口，导致垂直滚动条和黄色区域溢出。

解决方案 #

改用flex布局让内容区域自适应剩余空间，结合MudBlazor内置的flex类实现优雅布局：

1. 先修改MainLayout.razor中的MudMainContent，让它占满剩余高度：

<MudMainContent Class="d-flex flex-column h-100">
    @Body
</MudMainContent>

2. 再调整页面的MudGrid，让外层Grid成为垂直flex容器，黄色区域固定高度，其余区域自动填充剩余空间：

<MudGrid Justify="Justify.Center" Class="d-flex flex-column h-100 m-0">
    <MudItem Class="d-flex" Style="flex: 1;">
        <MudGrid Justify="Justify.Center" Class="w-100">
            <MudItem xs="2" Style="background-color: aqua; height: 100%;"></MudItem>
            <MudItem xs="8" Style="background-color: red; height: 100%;"></MudItem>
            <MudItem xs="2" Style="background-color: aqua; height: 100%;"></MudItem>
        </MudGrid>
    </MudItem>
    <MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem>
</MudGrid>

通过flex:1让上方区域自动填充AppBar之外的剩余空间，黄色区域固定10vh，整体高度刚好适配视口。

问题2：水平滚动条异常 #

原因 #

MudBlazor的MudMainContent默认带有左右内边距，MudGrid的MudItem也默认包含间距（gutter），两者叠加后内容总宽度会超出视口，触发水平滚动条。

解决方案 #

两种方法任选其一即可：

方法1：移除MainContent的默认内边距

修改MainLayout.razor中的MudMainContent：

<MudMainContent Class="d-flex flex-column h-100 px-0">
    @Body
</MudMainContent>

方法2：关闭MudGrid的间距

给页面的MudGrid添加Gutter="Gutter.None"属性：

<MudGrid Justify="Justify.Center" Class="d-flex flex-column h-100 m-0" Gutter="Gutter.None">
    <!-- 内部内容不变 -->
</MudGrid>

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