Angular Material 2(v5.2.2)侧边栏FAB始终固定右下角问题

我刚好碰到过类似的场景，在Angular Material 5里要实现这个效果，用flex布局是最稳妥的方式——既能让FAB始终钉在侧边栏底部，又能在内容过多时让卡片区域正常滚动。下面是具体的实现步骤：

1. 调整侧边栏的结构布局 #

先修改你的sideMenu.html，把内容拆成三个逻辑块：搜索栏、卡片列表容器、FAB容器，同时给最外层容器加个类名方便样式控制：

<div class="side-menu-container">
  <div class="searchBar-div">
    <iaas-searchbar></iaas-searchbar>
  </div>
  <div class="card-list-container">
    <iaas-sidecard *ngFor="let card of cards" [cardData]="card"></iaas-sidecard>
  </div>
  <div class="addButton-div">
    <iaas-addbutton></iaas-addbutton>
  </div>
</div>

2. 添加CSS样式实现固定效果 #

接下来给这些容器加样式，核心是用flex布局让卡片区域自动填充剩余空间，同时把FAB固定在底部：

/* 最外层容器：设置垂直flex布局，占满侧边栏全部高度 */
.side-menu-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px; /* 根据你的设计需求调整内边距 */
  box-sizing: border-box; /* 避免padding让容器超出侧边栏范围 */
}

/* 搜索栏：和下方卡片区域保持间距 */
.searchBar-div {
  margin-bottom: 16px;
}

/* 卡片列表容器：自动填充剩余空间，内容过多时触发滚动 */
.card-list-container {
  flex: 1;
  overflow-y: auto;
  /* 可选：自定义滚动条样式，匹配Angular Material的设计风格 */
}

/* FAB容器：靠右对齐，和上方卡片区域保持间距 */
.addButton-div {
  align-self: flex-end;
  margin-top: 16px;
  /* 可选：如果需要让按钮和侧边栏底部、右侧有额外间距，添加下面两行 */
  margin-bottom: 16px;
  margin-right: 8px;
}

3. 确保侧边栏本身有足够高度 #

最后要保证mat-drawer和它的容器有正确的高度，否则flex布局的height:100%不会生效：
修改main.html给侧边栏添加类名：

<mat-drawer-container class="container">
 <mat-drawer mode="side" opened="true" class="side-drawer">
 <iaas-sideMenu></iaas-sideMenu>
 </mat-drawer>
 ... 屏幕其他区域内容 ...
</mat-drawer-container>

对应的CSS样式：

/* 让抽屉容器占满整个视口高度 */
.container {
  height: 100vh;
}

/* 设置侧边栏宽度，确保它占满容器高度 */
.side-drawer {
  width: 320px; /* 根据你的需求调整宽度 */
  height: 100%;
}

为什么这个方案有效？ #

• flex布局的flex:1让卡片列表容器自动填充搜索栏和FAB之外的所有空间：内容少的时候它会收缩，FAB自然落在侧边栏底部；内容多的时候会自动出现滚动条，FAB则保持在底部不动。
• align-self: flex-end确保FAB靠右对齐，完美贴合右下角的位置要求。
• box-sizing: border-box避免padding导致容器高度超出侧边栏，保证布局的准确性。

这个方案完全适配Angular Material 5.2.2，不需要依赖旧版的特殊API，兼容性和稳定性都很好。

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