退出确认对话框高度自适应实现技巧

在开发网页应用时，用户点击退出或关闭页面前弹出确认对话框是常见需求。但很多人忽略了对话框内容变化时的高度适配问题，导致出现滚动条割裂、文字被截断或者空白区域过多的情况。

为什么需要高度自适应

比如用户在编辑一篇长文章时突然想退出，弹出的确认提示可能是“您有未保存的内容，确定要离开吗？”后面还跟着一段具体修改摘要。如果这段摘要很长，固定高度的对话框就会显示不全，用户体验大打折扣。

用CSS轻松实现自适应

关键在于容器不要设置固定高度，而是让其内容自然撑开。配合最大高度限制，既能防止过长内容撑满屏幕，又能保证短内容不留下大片空白。

.confirm-dialog {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  min-height: 150px;
  overflow-y: auto;
}

.confirm-content {
  padding: 20px;
  line-height: 1.5;
}

结合JavaScript动态控制

有时候提示语是由JS动态插入的，比如根据表单填写情况决定是否提醒。这时候可以在更新内容后手动触发一次尺寸计算，不过现代浏览器通常会自动重排，只要结构合理就不需额外操作。

function showExitConfirm(msg) {
  const dialog = document.getElementById('confirm-dialog');
  const content = dialog.querySelector('.confirm-content');
  content.innerText = msg;
  dialog.style.display = 'flex'; // 显示对话框
}

移动端也要考虑键盘影响

在手机上，软键盘弹起可能会压缩可视区域。使用 vh 单位时要注意这一点，可以改用 JavaScript 动态计算可用高度，避免对话框被键盘挡住按钮。

实际项目中，一个能随文本长短自由伸缩的退出确认框，不仅看起来更协调，也让信息传达更完整。别再写死 height: 300px 了，让用户看到每一条该看到的提醒才是重点。