带固定工具栏的 MudBlazor 可滚动内容答案

【问题标题】：MudBlazor scrollable content with pinned ToolBar带固定工具栏的 MudBlazor 可滚动内容
【发布时间】：2022-11-16 16:58:38
【问题描述】：

我想使用 MudBlazor 库实现以下结果。

我想将 (A) 元素作为 MudToolBar，在容器顶部固定辅助颜色
我希望它成为 MudToolBar 的 (C) 元素再次卡在容器底部

我希望 (B) 元素成为一个可滚动容器，其中包含我放入的任何内容。当我滚动它时，元素 A && C 不得随内容滚动。

所有这些都显示在抽屉主要内容中

<MudMainContent>
        <MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0">
            <MudLayout>
                // Here i will write the whole component
            </MudLayout>
        </MudPaper>
    </MudMainContent>

到目前为止，我已经完成了以下工作

<div class="d-flex flex-grow-1 flex-row">
    <MudPaper Elevation="25" Class="flex-grow-1">
        <MudToolBar> 
            A-Element
        </MudToolBar>


   <div class="d-flex flex-column" style="max-height:100vh;min-height:100vh; overflow:scroll;">
            // Here there will be a ForEach loop creating elements B-Element
    </div>
    <MudPaper Elevation="25" Class="d-flex flex-row px-2 mx-4" Style="">
         C-Element
    </MudPaper>
    </MudPaper>
</div>

我怎样才能做到这一点？？

【问题讨论】：

标签： html css flexbox c#-3.0 mudblazor

【解决方案1】：

尝试这个：

<div class="d-flex flex-column" style="height:100vh; overflow-x:auto;">
            // Here there will be a ForEach loop creating elements B-Element
</div>

【讨论】：

【解决方案2】：

条件相同我发现这个解决方案很有用：

<MudPaper Class="d-flex flex-column overflow-x-auto " Height="100vh">
    Your Content
</MudPaper>

有关更多信息，您可以阅读以下内容：

Enable Flexbox in MudBlazor
Flex Direction in MudBlazor
Overflow in MudBlazor

我阅读了这篇answer，然后基于它编写了我的解决方案。

【讨论】：