如何调整CSS让popup div完整显示在页面范围内不超出边界

一、定位逻辑修正（核心） #

现有代码仅实现了基于触发元素的上方定位，未做视口边界校验，需要在计算定位坐标后增加边界修正逻辑，步骤如下：

• 提前获取视口宽高、popup自身宽高、触发元素的尺寸参数
• 对top坐标做边界校验：
  1. 优先按原逻辑放在触发元素上方，如果计算出的top < 0（顶部超出视口），改为放在触发元素下方
  2. 如果放在下方依然超出视口底部，直接将top修正为视口高度减去popup高度再减安全边距，保证底部不超出
• 对left坐标做边界校验：
  1. 如果left < 0，直接修正为安全边距值，保证左侧不超出
  2. 如果left + popup宽度 > 视口宽度，修正为视口宽度减去popup宽度再减安全边距，保证右侧不超出

修改后的代码示例：

// 提前获取所需尺寸参数，需在popup DOM渲染完成后读取
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const popupWidth = this.popupRef.offsetWidth;
const triggerHeight = this.triggerRef.offsetHeight; // 需自行绑定触发元素的ref获取其高度
const safePadding = 10; // 统一安全边距，避免popup贴到视口边缘

let popupStyles = {};

if (this.props.useRefToPosition) {
  let finalLeft = this.state.leftRefPosition;
  let finalTop = this.state.topRefPosition - (this.state.popupHeight + safePadding);
  
  // 修正left边界
  if (finalLeft < safePadding) {
    finalLeft = safePadding;
  } else if (finalLeft + popupWidth > viewportWidth - safePadding) {
    finalLeft = viewportWidth - popupWidth - safePadding;
  }

  // 修正top边界
  if (finalTop < safePadding) {
    // 顶部超出，改放触发元素下方
    finalTop = this.state.topRefPosition + triggerHeight + safePadding;
    // 校验下方是否也超出
    if (finalTop + this.state.popupHeight > viewportHeight - safePadding) {
      finalTop = viewportHeight - this.state.popupHeight - safePadding;
    }
  } else if (finalTop + this.state.popupHeight > viewportHeight - safePadding) {
    finalTop = viewportHeight - this.state.popupHeight - safePadding;
  }

  popupStyles = {
    position: 'fixed',
    left: finalLeft,
    top: finalTop,
    bottom: 'unset'
  };
}

注意：popup的宽高需要等DOM渲染完成后才能读取到正确值，建议在popup显示的生命周期钩子（如类组件的componentDidUpdate）中执行定位计算逻辑，避免拿到0值导致定位偏差。

二、CSS补充优化 #

给popup类增加最大宽高限制，避免内容过多时强制撑开超出视口：

.tool-tip-popup {
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  box-sizing: border-box; /* 避免内边距撑开元素导致宽度计算偏差 */
}

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