如何使MudDrawer占用100%的高度

Question

我在我的blazor应用程序中有一个MudDrawer，我希望MudDrawer占用整个高度页的。以下是我尝试过的:

<MudDrawerContainer Class="mud-height-full">
<MudDrawer @bind-Open="@open" Width="300px" Height="900px" Fixed="true" Elevation="24" Variant="@DrawerVariant.Temporary" DisableOverlay="true" Style="background-color:aliceblue" Anchor="Anchor.End">
<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;
}
}

正如你所看到的，我已经将高度设置为900px，但我想成为页面的高度，我尝试了100%，但我没有得到我想要的结果。下面是演示

Answer 1

如果你想让它保持在原来的位置并占据整个窗口/容器的高度，那么你可以添加positon:fixed;

你可以使用位置css来移动它，比如顶部/底部等。我在示例中添加top:40px只是为了显示这一点。

mudblazor片段

<MudDrawer @bind-Open="@open" Width="300px" Fixed="true" Elevation="24"
Variant="@DrawerVariant.Temporary" DisableOverlay="true"
Style="background-color:aliceblue;position:fixed;top:40px;" Anchor="Anchor.End">
//..
</MudDrawer>