MudBlazor中max-height百分比设置失效问题求助

原因 #

百分比单位的max-height生效的核心前提是父元素必须有明确的高度值。你的场景里：

• MudMainContent、MudTabPanel默认没有设置高度，属于“高度由内容撑开”的状态，浏览器无法计算50%对应的实际像素尺寸，因此max-height:50%被直接忽略。
• 固定像素值（如200px）是绝对单位，不需要依赖父元素高度，所以能正常触发滚动。

解决步骤 #

要实现响应式的50%高度滚动TreeView，需要从父容器到子元素逐层明确高度继承：

1. 给MudMainContent设置高度为视口高度（100vh），作为最外层的高度基准：

   <MudMainContent Style="height:100vh;">
   

2. 让MudTabPanel继承父容器的高度，设置Height="100%"：

   <MudTabPanel Text="TreeView" Height="100%">
   

3. 包裹TreeView的MudItem需要同时设置max-height:50%和overflow-y:auto，并且确保它的父容器（如MudRow）也设置高度为100%，保证高度能传递下来：

   <MudRow Style="height:100%;">
       <MudItem Style="max-height:50%; overflow-y:auto;">
           <MudTreeView>
               <!-- TreeView内容 -->
           </MudTreeView>
       </MudItem>
       <MudItem>
           <MudButton>操作按钮</MudButton>
       </MudItem>
   </MudRow>
   

修改后的完整示例代码 #

<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudTypography Variant="Variant.H6" Class="ml-2">MudBlazor</MudTypography>
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="1">
        <NavMenu />
    </MudDrawer>
    <MudMainContent Style="height:100vh;">
        <MudTabs>
            <MudTabPanel Text="TreeView" Height="100%">
                <MudRow Style="height:100%;">
                    <MudItem Style="max-height:50%; overflow-y:auto;">
                        <MudTreeView @bind-SelectedValue="_selectedValue" Hover="true">
                            <MudTreeItem Value="root" Text="Root">
                                <MudTreeItem Value="child1" Text="Child 1">
                                    <MudTreeItem Value="grandchild1" Text="Grandchild 1" />
                                    <MudTreeItem Value="grandchild2" Text="Grandchild 2" />
                                    <MudTreeItem Value="grandchild3" Text="Grandchild 3" />
                                    <MudTreeItem Value="grandchild4" Text="Grandchild 4" />
                                    <MudTreeItem Value="grandchild5" Text="Grandchild 5" />
                                </MudTreeItem>
                                <MudTreeItem Value="child2" Text="Child 2">
                                    <MudTreeItem Value="grandchild6" Text="Grandchild 6" />
                                    <MudTreeItem Value="grandchild7" Text="Grandchild 7" />
                                    <MudTreeItem Value="grandchild8" Text="Grandchild 8" />
                                    <MudTreeItem Value="grandchild9" Text="Grandchild 9" />
                                    <MudTreeItem Value="grandchild10" Text="Grandchild 10" />
                                </MudTreeItem>
                                <MudTreeItem Value="child3" Text="Child 3">
                                    <MudTreeItem Value="grandchild11" Text="Grandchild 11" />
                                    <MudTreeItem Value="grandchild12" Text="Grandchild 12" />
                                    <MudTreeItem Value="grandchild13" Text="Grandchild 13" />
                                    <MudTreeItem Value="grandchild14" Text="Grandchild 14" />
                                    <MudTreeItem Value="grandchild15" Text="Grandchild 15" />
                                </MudTreeItem>
                                <MudTreeItem Value="child4" Text="Child 4">
                                    <MudTreeItem Value="grandchild16" Text="Grandchild 16" />
                                    <MudTreeItem Value="grandchild17" Text="Grandchild 17" />
                                    <MudTreeItem Value="grandchild18" Text="Grandchild 18" />
                                    <MudTreeItem Value="grandchild19" Text="Grandchild 19" />
                                    <MudTreeItem Value="grandchild20" Text="Grandchild 20" />
                                </MudTreeItem>
                            </MudTreeItem>
                        </MudTreeView>
                    </MudItem>
                    <MudItem>
                        <MudButton Variant="Variant.Filled" Color="Color.Primary">确认操作</MudButton>
                    </MudItem>
                </MudRow>
            </MudTabPanel>
        </MudTabs>
    </MudMainContent>
</MudLayout>

@code {
    private bool _drawerOpen = true;
    private object _selectedValue;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

这样修改后，TreeView的最大高度会自适应为MudMainContent的50%，超出内容自动滚动，同时保持响应式特性。

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