如何从底部强制角材料2 sidenav内容

Question

已经尝试在css中的几个位置覆盖角度材质2中的现有sidenav组件

mat-sidenav-container {
   background: white;
   bottom: 0px !important; /* <---- no help */
}
mat-sidenav {
   width: 300px;
   height: 500px;


   padding-left:20px;   /* Not sure why content goes out of range*/
   bottom: 0px !important; /* <---- no help */
}

Trying to make sidenav content start from bottom in this example 但我似乎无法覆盖由角度材料2提供的此组件中的任何内容

Answer 1

要实现此目的，不需要覆盖.mat类样式。使用以下css将内容放在底部。

侧面导航内容：

 <div class="inner-content" id="botNav" mat-list-item>
    <button mat-button *ngFor="let app of apps">{{ app }}</button>
 </div>

放置内容的Css：

.inner-content{
  position: absolute;
  bottom: 0;
  left: 0;
}

演示：https://plnkr.co/edit/GZroFhKjuXhtYu7bvgPK?p=preview