Angular Mat侧边栏与页脚布局异常求助：内容过多时错乱

核心布局调整思路 #

通过正确嵌套Angular Material导航组件，结合flexbox控制视口高度，将滚动区域限制在内容区内，同时固定侧边栏、让页脚随内容自然排布。

修正后的HTML代码 #

<!-- 根组件模板 -->
<mat-sidenav-container class="sidenav-container">
  <!-- 固定侧边栏 -->
  <mat-sidenav #sidenav mode="side" opened class="sidenav" fixedInViewport="true" fixedTopGap="0">
    <mat-nav-list>
      <a mat-list-item href="#">首页</a>
      <a mat-list-item href="#">文档</a>
      <a mat-list-item href="#">设置</a>
    </mat-nav-list>
  </mat-sidenav>

  <!-- 主内容区域 -->
  <mat-sidenav-content class="content-container">
    <!-- 页面主体内容 -->
    <main class="main-content">
      <!-- 替换为你的实际内容 -->
      <p *ngFor="let item of Array(50).fill(0)">示例内容行 {{item + 1}}</p>
    </main>

    <!-- 页脚 -->
    <footer class="page-footer">
      这是页脚内容
    </footer>
  </mat-sidenav-content>
</mat-sidenav-container>

对应的CSS代码 #

/* 重置全局样式，确保容器占满视口 */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* 消除全局滚动条，避免双滚动问题 */
}

/* 侧边栏容器占满整个视口高度 */
.sidenav-container {
  height: 100%;
}

/* 侧边栏基础样式，可按需调整 */
.sidenav {
  width: 250px;
  background-color: #f5f5f5;
}

/* 主内容容器用flex垂直布局，控制内容与页脚的排布 */
.content-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 主体内容占据剩余空间，开启垂直滚动 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 页脚样式，固定高度并保持在内容下方 */
.page-footer {
  padding: 15px;
  background-color: #e0e0e0;
  border-top: 1px solid #ccc;
}

关键说明 #

• mat-sidenav-container 设置为100%高度，作为页面根容器，避免全局溢出
• 侧边栏添加 fixedInViewport="true" 属性，确保滚动时保持固定位置
• content-container 用flex垂直布局，main-content 通过 flex:1 占据剩余空间并开启滚动，仅内容区滚动，不带动侧边栏和页脚
• 全局 overflow: hidden 彻底消除双滚动条问题
• 页脚嵌套在 mat-sidenav-content 内，随内容长度动态排布，内容过长时自动被推至页面底部

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