<p>iframe height: 100%超出屏幕的直接原因是父容器高度未扣除固定导航栏占用空间，导致计算基准错误；必须确保html/body设height: 100%、父容器用flex或calc(100dvh - 60px)精确预留可用高度，并避免子页body默认边距干扰。</p>

iframe height: 100% 超出屏幕的直接原因

不是 iframe 自己“长高了”，而是它的父容器高度被设为 100vh（整个视口），但页面顶部有固定定位的导航栏（比如 position: fixed; top: 0; height: 60px），导致 iframe 实际可占用空间只有 100vh - 60px。此时若父容器仍用 height: 100vh，iframe 再设 height: 100% 就会和导航栏重叠或溢出底部。

父容器高度必须减去导航栏占用空间

关键不是改 iframe，而是控制它的直接父容器高度。常见错误是只给 iframe 设 height: 100%，却忽略父 <div> 没做高度裁剪。

• html 和 body 仍需 height: 100% + margin: 0; padding: 0;，这是百分比链的基础
• 导航栏外层容器（如 .layout）建议用 display: flex; flex-direction: column;
• 导航栏本身设固定高度（如 height: 60px;），主内容区（含 iframe 容器）设 flex: 1; overflow: hidden;
• iframe 的直接父容器（比如 .iframe-wrapper）必须设 height: 100%;，不能靠 min-height 或内容撑开

这样 iframe 才能真正拿到“扣除导航栏后的剩余高度”作为 100% 的计算基准。

用 calc(100vh - 60px) 时要注意兼容性陷阱

虽然写 height: calc(100vh - 60px) 看似直白，但在 iOS Safari 中，100vh 会随地址栏收放动态变化，导致 iframe 高度抖动甚至内容截断。更稳的方式是：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

立即学习“前端免费学习笔记（深入）”；

• 改用 100dvh：现代浏览器支持，代表“设备视口高度”，不随地址栏变化 —— height: calc(100dvh - 60px);
• 降级方案：对不支持 dvh 的旧浏览器，用 JS 动态监听 resize 并更新高度（仅需一次赋值，无需轮询）
• 避免在 calc() 中混用单位，比如 calc(100vh - 1rem) 在某些安卓 WebView 中解析异常，优先用 px 或 rem 统一

iframe 内容滚动与父页面滚动冲突怎么办

当 iframe 高度略小于内容、又没关掉滚动条时，会出现双滚动条：一个在 iframe 内，一个在父页面 body 上。这不是高度算错，而是默认行为叠加。

• 确保 iframe 元素设 display: block;，消除行内元素默认的底部空白
• iframe 标签上加 scrolling="no"（HTML 属性）或 CSS overflow: hidden;
• 如果希望内容可滚动，应让 iframe 自身处理，而不是依赖父容器 overflow: auto —— 后者容易抢走滚动事件
• 跨域 iframe 无法通过 JS 读取子页高度，此时必须由子页主动发 postMessage 告知真实高度，父页再调整容器

最常被忽略的一点：即使用了 flex + 100dvh，只要 iframe 的 src 页面里也写了 body { margin: 8px; }，它内部就会多出 8px 边距，导致实际内容高度超出容器 —— 这类问题只能进子页调样式，父页无解。