Blazor侧边栏菜单在展开菜单后未到达页面底部

Question

我的Blazor应用程序上有一个侧边栏菜单，当你点击其中一个菜单选项时，它有一个可扩展的部分。当你点击这个选项时；"维护"；，它在维护选项下方的菜单中添加了更多选项。然而，当它这样做时，它也会向下推它下面的所有内容，并在页面中添加滚动条。这是可以的，除了事实上，被推下侧边栏的项目超过了侧边栏样式的点。我已经包括了一张图片来展示我所说的图片的意思。我希望有一种方法可以强制侧边栏始终位于页面底部，即使页面被扩展。这是我的页面代码。

<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Degrade Web</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="enterData">
<span class="oi oi-tablet" aria-hidden="true"></span>Enter Data
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="deleteUnit">
<span class="oi oi-circle-x" aria-hidden="true"></span>Delete Unit
</NavLink>
</div>
@if (isAdmin) 
{
<div class="nav-item px-3">
<NavLink class="nav-link" id="navLink" @onclick="()=>expandSubNav = !expandSubNav">
<span class="oi oi-signpost" aria-hidden="true"></span>Maintenance
</NavLink>
</div>
@if (expandSubNav)
{
<div class="nav-item px-3">
<NavLink class="nav-link" href="addDimension">
<span class="oi oi-resize-both" aria-hidden="true">add Dimension</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="addGrade">
<span class="oi oi-circle-check" aria-hidden="true">add Grade</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="addSpecie">
<span class="oi oi-dial" aria-hidden="true">add Specie</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="addSeasoning">
<span class="oi oi-dashboard" aria-hidden="true">add Seasoning</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="lookupTables">
<span class="oi oi-magnifying-glass" aria-hidden="true">Lookup Tables</span>
</NavLink>
</div>
}
}
<div class="nav-item px-3">
<NavLink class="nav-link" href="comparison">
<span class="oi oi-eye" aria-hidden="true"></span>Comparison
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="summary">
<span class="oi oi-list" aria-hidden="true"></span>Summary
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="unitHistory">
<span class="oi oi-book" aria-hidden="true"></span>Unit History
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="form">
<span class="oi oi-pencil" aria-hidden="true"></span>Form
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="trend">
<span class="oi oi-graph" aria-hidden="true"></span>Trend
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="percents">
<span class="oi oi-fork" aria-hidden="true"></span>Percents
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="piecesByMill">
<span class="oi oi-layers" aria-hidden="true"></span>Pieces by Mill
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="reasonsByWeek">
<span class="oi oi-calendar" aria-hidden="true"></span>Reasons by Week
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="reasons">
<span class="oi oi-bolt" aria-hidden="true"></span>Reasons
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="category">
<span class="oi oi-beaker" aria-hidden="true"></span>Category
</NavLink>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private bool expandSubNav;
private bool isAdmin = false;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
protected override async Task OnInitializedAsync() 
{
if (isAdmin) // If this user is an admin, force an update of the page
{
this.StateHasChanged();
}
else
{
isAdmin = true;
this.StateHasChanged();
}
}
}

这是css

.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand {
font-size: 1.1rem;
}
.oi {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
.nav-item:last-of-type {
padding-bottom: 1rem;
}
.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item ::deep a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item ::deep a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler {
display: none;
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;
}
}

Answer 1

我相信您可以通过将overflow-y: auto;添加到中的.sidebar样式来解决此问题

MainLayout.rarzor.css：

.sidebar {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
/* Add this line */
overflow-y: auto;
}

(假设您使用Blazor模板中的默认MainLayout.razor和MainLayout.razor.css(