自定义表格行右侧下拉菜单展开撑高容器，如何实现向上自适应弹出

针对最后一行的操作菜单展开撑高外层容器的问题，从零实现的核心是脱离文档流定位 + 实时边界判断，不需要依赖第三方UI库：

• 基础定位改造
  把每行菜单的触发区域设置为position: relative，配套的下拉菜单设置为position: absolute，让菜单完全脱离常规文档流，从根源上避免菜单展开时挤压父元素、撑高表格容器的问题。
• 展开时的边界判断逻辑
  每次点击触发菜单展开时，通过原生DOM API计算位置：
  1. 用getBoundingClientRect()获取触发按钮的位置信息：包括自身下边缘距离视口的坐标、按钮自身高度
  2. 同样获取表格外层可视容器的下边界坐标
  3. 模拟菜单默认向下弹出的场景，计算菜单如果直接在按钮下方展开，最终的底部坐标是「按钮下边缘坐标 + 菜单自身高度」
  4. 如果计算出的底部坐标超过了表格可视容器的下边界，就切换为向上弹出的定位模式
• 反向定位的样式调整
  切换弹出方向时保持菜单和触发按钮的水平右对齐逻辑不变，只需要把默认向下的定位值top: 100%替换为向上弹出的定位值bottom: 100%即可，不需要调整菜单的宽度、水平位置。

实现时需要注意的细节：

• 边界计算不要直接用整个页面的视口底部坐标，要以表格自身的滚动可视区域边界为准，避免页面其他位置的内容干扰判断
• 窗口尺寸变化、表格内容滚动、表格行动态增删的时候，要重新执行一次位置判断逻辑，避免菜单弹出方向错位
• 始终保持表格外层容器的overflow属性为滚动或裁切状态，不要为了完整显示菜单刻意把容器改成overflow: visible，否则依然会出现撑高容器的问题

核心判断逻辑的参考实现：

function syncMenuPosition(triggerBtn, menuDom, tableWrap) {
  const triggerRect = triggerBtn.getBoundingClientRect()
  const wrapRect = tableWrap.getBoundingClientRect()
  const menuActualHeight = menuDom.offsetHeight
  // 判断向下弹出是否会超出可视区域
  const overflowToBottom = triggerRect.bottom + menuActualHeight > wrapRect.bottom

  if (overflowToBottom) {
    // 向上弹出的定位
    menuDom.style.top = 'auto'
    menuDom.style.bottom = '100%'
  } else {
    // 默认向下弹出的定位
    menuDom.style.bottom = 'auto'
    menuDom.style.top = '100%'
  }
}

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