如何让Blazor中的MudDrawer占满页面100%高度？

要让MudDrawer占满整个页面高度，核心是确保父容器有明确的高度定义，同时让Drawer继承这个高度。你之前设置Height="100%"无效，是因为父元素没有指定高度，100%无法参照计算。

修改后的代码： #

<MudDrawerContainer Class="mud-height-screen">
    <MudDrawer @bind-Open="@open" Width="300px" Fixed="true" Elevation="24" 
               Variant="@DrawerVariant.Temporary" DisableOverlay="true" 
               Style="background-color:aliceblue" Anchor="Anchor.End"
               Class="mud-height-full">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">My App</MudText>
        </MudDrawerHeader>
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LocalLibrary">Library</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Forum">Community</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
</MudDrawerContainer>
<div class="d-flex justify-center align-center mud-height-full">
    <MudButton Color="Color.Inherit" OnClick="@ToggleDrawer"
               StartIcon="@Icons.Material.Filled.West" Class="mx-2">Toggle drawer</MudButton>
</div>

@code {
    bool open = false;

    void ToggleDrawer()
    {
        open = !open;
    }
}

关键调整说明： #

1. 给MudDrawerContainer添加mud-height-screen类：这是MudBlazor内置类，直接将容器高度设为100vh（整个视口高度），让父容器有明确的全屏基准。
2. 移除MudDrawer的固定Height="900px"，替换为mud-height-full类：让Drawer自动继承父容器的100%高度，实现全屏效果。
3. 无需单独设置Height="100%"，mud-height-full已经完成了相对于父元素的高度占满逻辑。

如果页面存在顶部导航栏等固定元素，可以将MudDrawerContainer的高度改为calc(100vh - 导航栏高度)，或者用Flex布局让Drawer自动填充剩余空间。

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