У меня есть MudDrawer в моем приложении Blazor, и я хотел бы, чтобы 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;
}
}
Как вы можете видеть, я установил высоту на 900 пикселей, но я хочу, чтобы высота страницы была равной 100%, но я не получил желаемых результатов. Вот демо





Если вы хотите, чтобы он оставался на месте и занимал всю высоту окна/контейнера, вы можете добавить positon:fixed;
Вы можете перемещать его с помощью позиционного css, т. е. сверху/снизу и т. д. Я добавил top:40px в пример, чтобы показать это.
<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>