Blazor侧边栏展开后无法延伸至页面底部问题求助

当前侧边栏未设置合理的高度约束与滚动机制，展开子菜单后总内容高度超过视口，导致全局页面出现滚动条。以下是针对性修改方案：

1. 调整主布局结构（MainLayout.razor） #

确保页面容器采用flex布局，让侧边栏与主内容区域完整填充视口高度：

@inherits LayoutComponentBase

<div class="page">
  <div class="sidebar">
    <NavMenu />
  </div>

  <main>
    <div class="top-row ps-3 navbar navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="">Degrade Web</a>
      </div>
    </div>
    <article class="content px-4">
      @Body
    </article>
  </main>
</div>

2. 更新全局CSS样式 #

补充布局约束并修改侧边栏滚动行为：

/* 全局页面容器 */
.page {
  display: flex;
  height: 100vh; /* 占满整个视口高度 */
  overflow: hidden; /* 禁用全局滚动 */
}

/* 侧边栏容器 */
.sidebar {
  background-color: #1e293b; /* 匹配原有主题色，可按需调整 */
  width: 250px; /* 侧边栏固定宽度 */
  display: flex;
  flex-direction: column;
  height: 100%; /* 延伸至页面底部 */
}

/* 导航区域样式修改 */
.collapse {
  flex: 1; /* 占满侧边栏剩余空间 */
  overflow-y: auto; /* 内容超出时仅在侧边栏内部滚动 */
  padding-bottom: 1rem; /* 底部留白避免内容贴边 */
}

/* 保留原有样式 */
.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 {
    display: block;
  }
}

3. 调整NavMenu组件外层容器 #

确保导航区域能正确填充侧边栏空间：

<div class="@NavMenuCssClass d-flex flex-column h-100">
  <nav class="flex-column flex-grow-1">
    <!-- 原有导航项与子菜单代码 -->
  </nav>
</div>

修改说明 #

• page容器设置height:100vh和overflow:hidden，确保页面无全局滚动条
• sidebar通过flex-direction:column和height:100%强制延伸至页面底部
• collapse类添加overflow-y:auto，让子菜单展开后超出的内容仅在侧边栏内部滚动，不影响页面整体布局

内容的提问来源于stack exchange，提问作者WebDevver