帶固定工具欄的 MudBlazor 可滾動內容

Question

我想使用 MudBlazor 庫實現以下結果。

1. (A) 元素我想成為一個 MudToolBar，其次要顏色固定在 Container 的頂部
2. 我希望它成為 MudToolBar 的 (C) 元素再次卡在容器的底部
3. (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>

我怎樣才能做到這一點？？

Answer 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>

Answer 2

在相同的條件下，我發現這個解決方案很有用：

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

有關更多信息，您可以閱讀以下內容：

1. 在 MudBlazor 中啟用 Flexbox
2. MudBlazor 中的彎曲方向
3. MudBlazor 中的溢出

我閱讀了這個答案，然后基於它編寫了我的解決方案。