如何让Angular Material菜单始终在触发元素下方展开

针对你使用的Angular Material v15非MDC版本菜单，可以通过以下配置强制菜单固定在触发元素下方，无视视口空间限制：

1. 基础配置：禁用自动定位+指定下方位置 #

在mat-menu组件上添加两个核心属性，关闭自动位置调整并强制设置为下方定位：

<button mat-button [matMenuTriggerFor]="menu">触发按钮</button>
<mat-menu #menu="matMenu" yPosition="below" [disableAutoPosition]="true">
  <button mat-menu-item>菜单选项1</button>
  <button mat-menu-item>菜单选项2</button>
  <button mat-menu-item>更多选项...</button>
</mat-menu>

• yPosition="below"：明确指定菜单默认显示在触发元素下方
• [disableAutoPosition]="true"：禁用菜单的自动位置适配逻辑，哪怕页面下方空间不足，也不会自动切换到上方显示

2. 可选：避免菜单与触发元素重叠 #

如果希望菜单完全在触发元素下方，不产生重叠，可额外添加overlapTrigger="false"属性：

<mat-menu #menu="matMenu" yPosition="below" [disableAutoPosition]="true" overlapTrigger="false">
  <!-- 菜单内容 -->
</mat-menu>

3. 处理长菜单内容（避免页面截断） #

如果菜单选项过多导致页面被截断，可以给菜单添加滚动条限制高度：

::ng-deep .mat-menu-panel {
  max-height: 320px; /* 根据实际需求调整高度 */
  overflow-y: auto;
}

这段样式会给菜单面板设置最大高度，超出部分自动显示垂直滚动条，保证菜单内容可访问的同时不会撑破页面布局。

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