前言
做前端开发的小伙伴，大概率都遇到过一个极其诡异的 iframe 问题：
给 iframe 设置 height: 100% 自适应填满父容器，页面明明没有多余内容，浏览器却凭空多出一条垂直微小滚动条。
长久以来大部分人的万能解法都简单粗暴：直接写成 height: calc\(100% \- 6px\)，扣掉6个像素强行解决（大约6px）。
方案能用，但为什么会有这个问题？这到底是 Chrome 的浏览器 bug，还是我们 CSS 基础知识存在盲区？
今天一次性给大家讲透这个经典的历史遗留布局问题。
## 一、问题现象
1.1 场景复现
父容器宽高 100%，内部嵌套 iframe，样式极简配置：
.container {
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
在 MacOS Chrome 环境下，百分百复现垂直滚动条；Windows 平台大部分情况下无异常，几乎无法感知。
1.2 行业通用“野路子”解法
为了干掉滚动条，业内默认统一减法：
iframe {
/* 暴力扣6px，直接隐藏溢出 */
height: calc(100% - 6px);
}
这个方法全网通用，但本质属于掩耳盗铃，治标不治本。
## 二、核心结论（直接划重点）
这不是浏览器 Bug，而是 CSS 原生布局特性。
根本原因：iframe 默认是行内级元素（inline-level），受基线对齐机制影响，底部会预留3~6px空白间隙，导致整体内容高度超出父容器，触发滚动条。
## 三、底层原理深度解析
3.1 iframe 的默认属性
很多开发者误以为 iframe 和 div 一样是块级元素，实则不然：
div：块级元素（block）iframe / img / span：行内替换元素（inline replaced element）
行内元素有一个专属特性：默认垂直对齐方式为 vertical\-align: baseline。
3.2 什么是基线留白？
浏览器排版文字时，为了容纳 y、p、q、g 这类带有下行部的字母，会在文本基线下方预留一小段空白区域。
由于 iframe 是行内元素，它会和文字保持一样的对齐规则：元素底部并不会贴死容器底边，而是对齐文字基线，自动留出一小段空白（常规字号下约 4~6px）。
3.3 为什么 100% 高度会溢出？
我们可以简单拆解总高度：
```Plain Text
总高度 = iframe(100%) + 基线留白(4~6px)
此时内容总高度 \> 父容器高度，超出部分触发 overflow，浏览器自动生成垂直滚动条。
---
## \#\# 四、为什么 Mac 必现，Windows 几乎看不到？
这是两个平台滚动条渲染机制的差异，并非代码问题：
### MacOS
滚动条为**悬浮模式**，默认不占用页面布局空间，仅鼠标滚动时显示。一旦内容出现1px溢出，就会直接展示悬浮滚动条，问题暴露无遗。
### Windows
Chrome 默认**常驻实体滚动条**，滚动条宽度固定17px且直接占用容器内部空间。很多场景下浏览器内部尺寸计算相互抵消，直接掩盖了底部6px的留白问题，所以很难发现异常。
---
## \#\# 五、三种正规最优解决方案（彻底根治）
下面三种方案均能从根源消除基线留白，兼容性拉满，完胜 calc 减法。
### 方案一：直接转为块级元素（最推荐）
直接破坏行内元素对齐规则，简单高效，全网最优解：
```css
iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
方案二：修改垂直对齐方式
放弃基线对齐，直接顶部对齐，规避留白：
iframe {
vertical-align: top;
width: 100%;
height: 100%;
}
方案三：清空父容器字号
基线留白大小由父容器字号决定，字号为0，留白直接消失：
.container {
height: 100%;
font-size: 0; /* 消除基线间隙 */
}
iframe {
width: 100%;
height: 100%;
}
## 六、为什么不推荐 calc(100% - 6px)？
很多人一直用这个方案，我强烈不建议，原因有3点：
治标不治本：只是强行裁切元素高度，没有解决底层的基线留白问题；
适配性极差：留白尺寸由字号、字体类型决定，并非固定6px，特殊字体/字号下会出现裁切过多、留白依旧存在等新问题；
维护成本高：团队新人看不懂魔法数字6px的含义，后期极易引发二次bug。
## 七、最终最佳实践（生产环境直接复制）
一套兼顾容错、兼容所有浏览器的完整全局配置：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.iframe-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.iframe-wrapper iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
box-sizing: border-box;
}
## 写在最后
很多前端诡异的布局问题，从来都不是浏览器bug，而是我们对CSS基础排版机制了解不够透彻。
calc(100% - 6px) 是懒人解法，display: block 才是专业解法。
希望这篇文章能帮你彻底告别这个困扰无数前端多年的小坑！
（注：文档部分内容可能由 AI 生成）
