Angular Material与Bootstrap项目中菜单折叠时div宽度对齐失效

问题原因 #

你当前写死的width: calc(100vw - 186px)仅适配了侧边栏展开状态的宽度（186px为展开时侧边栏宽度），当侧边栏折叠后宽度变小，固定减去186px就会在内容区右侧多出空白。

最优解决方案：用Flex布局自动适配 #

无需手动计算宽度，利用Flex弹性布局的自动填充特性适配两种状态，操作步骤如下：

1. 给侧边栏+内容区的共同父容器添加Flex布局样式：

/* 父容器自定义类名可自行替换 */
.layout-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

2. 移除内容区原有的固定宽度计算规则，替换为flex:1即可：

/* 你的目标div样式 */
.content-area {
  flex: 1;
  overflow-y: auto; /* 内容超出时单独出滚动条，不影响整体布局 */
}

该方案下侧边栏无论展开、折叠宽度如何变化，内容区都会自动占满剩余的所有屏幕宽度。

备选方案：绑定动态CSS变量计算宽度 #

如果因项目限制无法修改布局结构，可通过Angular的状态绑定动态调整计算值：

1. 给组件添加侧边栏状态变量，和Angular Material侧边栏的opened属性双向绑定：

// 组件类中添加变量
isMenuOpened = true;

<!-- 侧边栏绑定状态 -->
<mat-sidenav [(opened)]="isMenuOpened">
  <!-- 菜单内容 -->
</mat-sidenav>

2. 在父容器上动态绑定CSS变量，传入两种状态的侧边栏宽度：

<div class="layout-container" [style.--sidebar-width]="isMenuOpened ? '186px' : '64px'">
  <!-- 侧边栏、内容区放在此处，64px替换为你实际折叠后的侧边栏宽度 -->
</div>

3. 修改内容区宽度规则使用动态变量：

.content-area {
  width: calc(100vw - var(--sidebar-width));
}

注意事项 #

如果内容区使用了Bootstrap的container类，记得替换为container-fluid取消固定最大宽度限制，否则会额外出现左右留白。

内容的提问来源于stack exchange，提问作者Rajesh Kumar Duraisamy