mat-sidenav内mat-progress-bar设为100%仅显示半满问题

当你把mat-progress-bar放在mat-sidenav里，值设为100却只显示一半，本质是mat-sidenav默认的内边距和进度条的宽度计算冲突了。mat-sidenav自带左右padding（一般是16px），而mat-progress-bar默认宽度是100%，但它的进度填充元素是基于父容器的内容宽度计算的，没有扣除padding，导致视觉上看起来只填满了一半。

给你两个简单的解决办法：

方法一：直接给进度条设置调整后的宽度 #

修改sidenav里的进度条代码，手动减去sidenav的内边距：

<mat-sidenav mode="side" [(opened)]="opened">
  Start
  <mat-progress-bar value="100" style="width: calc(100% - 16px);"></mat-progress-bar>
</mat-sidenav>

方法二：通过CSS统一设置 #

在你的组件样式文件（比如xxx.component.css）里添加以下样式，给sidenav内的进度条统一调整宽度：

.mat-sidenav .mat-progress-bar {
  width: calc(100% - 16px);
}

如果组件样式有封装隔离的问题，也可以把这段样式放到全局样式文件（styles.css）里，或者用::ng-deep（注意Angular版本兼容）：

::ng-deep .mat-sidenav .mat-progress-bar {
  width: calc(100% - 16px);
}

这样调整后，进度条就能填满mat-sidenav的可用空间，和主内容区的进度条一样正常显示100%的状态了。

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