如何让顶部Card固定在AppBar下方，其余内容无需指定高度即可滚动？

我想在可滚动卡片列表上方设置一个固定的Card，尝试过overflow和position:fixed的不同配置，但始终无法实现两个核心效果：

• 顶部Card保持固定位置，不随下方列表滚动
• 下方的卡片列表容器能自动填充页面剩余空间，无需手动指定高度和底部内边距，同时列表内容可滚动

尝试的代码示例：

<MudAppBar Color="Color.Primary" Fixed="true" >
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

<MudGrid Spacing="2" Style="margin-top:86px;">
    <MudItem xs="12">
        <MudCard>
            <MudCardContent>
                <MudText>Story of the day</MudText>
                <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
            </MudCardContent>
            <MudCardActions>
                <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
            </MudCardActions>
        </MudCard>
    </MudItem>

    <MudItem xs="12">
        <MudDivider></MudDivider>
    </MudItem>

    <div class="pa-3 overflow-scroll" style="height:200px; width:100%">
        @for (int i = 0; i < 20; i++)
        {
            <MudItem xs="12">
                <MudCard>
                    <MudCardContent>
                        <MudText>Story of the day</MudText>
                        <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
                    </MudCardContent>
                    <MudCardActions>
                        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
                    </MudCardActions>
                </MudCard>
            </MudItem>
        }
    </div>
    
</MudGrid>

通过CSS Flexbox布局可以完美实现需求，核心是让页面主体区域成为flex容器，让滚动区域自动占据剩余空间。修改后的代码如下：

<MudAppBar Color="Color.Primary" Fixed="true" >
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

<!-- 让Grid成为垂直flex容器，高度减去AppBar的86px -->
<MudGrid Spacing="2" Style="margin-top:86px; display: flex; flex-direction: column; min-height: calc(100vh - 86px);">
    <MudItem xs="12">
        <MudCard>
            <MudCardContent>
                <MudText>Story of the day</MudText>
                <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
            </MudCardContent>
            <MudCardActions>
                <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
            </MudCardActions>
        </MudCard>
    </MudItem>

    <MudItem xs="12">
        <MudDivider></MudDivider>
    </MudItem>

    <!-- 用MudItem替代div，设置flex:1自动填充剩余空间，overflow-y:auto实现滚动 -->
    <MudItem xs="12" Style="flex: 1; overflow-y: auto; padding: 12px;">
        @for (int i = 0; i < 20; i++)
        {
            <MudItem xs="12" Style="margin-bottom: 16px;">
                <MudCard>
                    <MudCardContent>
                        <MudText>Story of the day</MudText>
                        <MudText Typo="Typo.body2">The quick, brown fox jumps over a lazy dog.</MudText>
                    </MudCardContent>
                    <MudCardActions>
                        <MudButton Variant="Variant.Text" Color="Color.Primary">Learn More</MudButton>
                    </MudCardActions>
                </MudCard>
            </MudItem>
        }
    </MudItem>
</MudGrid>

关键说明： #

• 给MudGrid设置display: flex; flex-direction: column; min-height: calc(100vh - 86px);，让Grid成为垂直方向的flex容器，高度自动适配视口减去顶部AppBar的高度
• 将滚动区域的div替换为MudItem，并添加flex: 1属性，使其自动填充Grid的剩余空间；overflow-y: auto确保内容超出时自动显示滚动条
• 移除了手动指定的固定高度，布局完全自适应页面剩余空间，同时顶部Card会保持固定位置，不会随下方列表滚动

内容的提问来源于stack exchange，提问作者Zoltán