主页 / coding / 问题 / 78573968
Accepted
CrazyEight
Asked: 2024-06-04 15:39:30 +0800 CST

MudBlazor - 页面布局

  • 772

我目前正在尝试创建一个 MudBlazor WebApp。由于我对 MudBlazor 还很陌生，所以我尝试弄清楚间距和页面布局是如何工作的。

因此，我从 MudBlazor线框中采用了一个非常基本的布局，其中包含左侧抽屉和顶部应用栏。

所以我的MainLayout.razor看起来像这样：

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="2">
        <MudDrawerHeader>
            <MudText Typo="Typo.h5" Class="mt-1">@Configuration["ApplicationSettings:AppName"]</MudText>
        </MudDrawerHeader>
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

还有我的页面布局：

<MudGrid Justify="Justify.Center">
    <MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem>
    <MudItem xs="8" Style="background-color: red; height: 90vh;"></MudItem>
    <MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem>
    <MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem>
</MudGrid>

所以这就是渲染的内容： 在此输入图像描述

现在有两个主要问题困扰着我

  1. 正如您所看到的，有一个垂直滚动条，因为黄色区域流出......我希望黄色区域具有固定的高度，蓝色/浅绿色和红色区域占据剩余的垂直空间。类似的东西height: auto或者类似的东西。我以为90vh是指父容器高度的 90%，但显然这里出了问题
  2. 还有一个水平滚动条我无法解释，因为我只是在使用它，MudGrid我什至无法真正影响它并12代表它take whole available space
css

1 个回答

  1. Best Answer

    您需要考虑 AppBar 使用的空间。

    <MudGrid Justify="Justify.Center">
    <MudItem xs="2" Style="background-color: aqua; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="8" Style="background-color: red; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="2" Style="background-color: aqua; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem>
</MudGrid>

    完整的例子在这里

    • 2

相关问题