dialog 默认不自适应内容高度，需用 max-height + overflow-y: auto 组合实现；height: auto 无效因 UA 样式及定位/布局上下文限制；正确做法是限制 dialog 最大高度并在内部容器单独滚动。
dialog 默认不自适应内容高度，必须手动控制；它不会像 flex 容器或 fit-content 那样自动收缩/撑开，直接设 height: auto 无效，得靠 max-height + overflow-y: auto 组合来模拟“自适应”。
为什么 dialog 设 height: auto 没用
dialog 在 showModal() 后渲染为 display: block，但其默认块级行为受浏览器 UA 样式影响极大：Chrome 给了最小高度、Firefox 不设限、Safari 可能塌陷。更关键的是，height: auto 在绝对定位或 flex 子项中常被忽略——而居中常用 position: fixed 或 display: flex，这两者都会让 height: auto 失效。
常见错误现象：
- 内容少时 dialog 过高，底部留白严重
- 内容多时溢出屏幕，且不出现滚动条
- 加了
overflow: auto但整个 dialog 还是撑满视口
正确做法：用 max-height + overflow-y: auto + 内容区独立滚动
核心思路是：限制 dialog 整体最大高度，把滚动行为交给内部一个固定定位或 flex 子容器，而非 dialog 自身。
立即学习“前端免费学习笔记（深入）”；
- 给
dialog设max-height: 80vh（避免遮住顶部地址栏）和margin: 2rem auto（预留上下边距） - 在
dialog内部包一层<div class="dialog__content">，并设max-height: calc(80vh - 80px)（减去标题、按钮等固定区域高度） - 该
div必须设overflow-y: auto和padding，且不能设height（否则会截断） - 如果用
position: fixed居中，需确保.dialog__content的top/bottom值留出 header/footer 空间
示例关键 CSS：
dialog {
max-height: 80vh;
margin: 2rem auto;
width: 90vw;
max-width: 600px;
}
<p>dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}</p><p>.dialog__content {
max-height: calc(80vh - 100px); /<em> 减去 title + footer 高度 </em>/
overflow-y: auto;
padding: 1rem;
}
兼容性与 Safari 特别处理
Safari 16.4+ 对 dialog 的 max-height 支持尚不稳定，尤其在父元素有 transform 或 will-change 时，max-height 可能被忽略导致内容溢出。
- 强制 Safari 使用
position: fixed+top/left+transform居中，而非依赖 flex - 避免在
dialog父级使用transform: scale()或will-change: transform - 对 Safari 做运行时检测：
if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome'))，动态加dialog.style.height = 'fit-content'（仅作 fallback，不可靠） - 移动端需额外加
@supports (-webkit-overflow-scrolling: touch)优化滚动惯性
表单提交后 dialog 高度错乱怎么办
用 method="dialog" 提交后，dialog 会关闭再重开（若再次调用 showModal()），此时内容高度可能重算失败，导致滚动条消失或错位。
- 不要依赖
dialog.returnValue后立即重开同一 dialog；改用setTimeout(() => dialog.showModal(), 0)让 DOM 重排完成 - 每次打开前重置
.dialog__content的scrollTop = 0，防止残留滚动位置干扰高度计算 - 如果内容含图片或异步加载元素，监听
load事件后手动触发dialog.style.height = 'auto'（仅临时 hack）
真正可靠的“自适应高度”不是一劳永逸的 CSS 值，而是对内容尺寸变化保持响应——尤其是当 dialog 内部有折叠面板、动态表格或富文本时，resizeObserver 监听内容区高度比硬编码 max-height 更稳健，但多数场景下，max-height + overflow-y 已足够。别忘了：所有滚动都应发生在内容区，而不是 dialog 元素本身。
