![](/img/trans.png)
[英]Header/Content/Footer layout with scrollable content and footer pinned to viewport bottom
[英]MudBlazor scrollable content with pinned ToolBar
我想使用 MudBlazor 库实现以下结果。
所有这些都显示在抽屉的主要内容中
<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>
我怎样才能做到这一点??
尝试这个:
<div class="d-flex flex-column" style="height:100vh; overflow-x:auto;">
// Here there will be a ForEach loop creating elements B-Element
</div>
在相同的条件下,我发现这个解决方案很有用:
<MudPaper Class="d-flex flex-column overflow-x-auto " Height="100vh">
Your Content
</MudPaper>
有关更多信息,您可以阅读以下内容:
我阅读了这个答案,然后基于它编写了我的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.