如何让嵌入PDF的iframe铺满整页？高度设置无效求助

核心原因 #

设置height: 100%时，iframe的高度是相对父元素（通常是body或上级容器）计算的。如果html、body这类根元素没有明确设置100%高度，iframe的百分比高度就无法撑满整个视口。

具体解决方案 #

方法一：通过CSS让根元素和iframe全屏 #

给页面添加以下样式，确保根元素撑满视口，同时让iframe完全继承高度：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免页面和iframe出现双重滚动条 */
}

iframe {
  width: 100%;
  height: 100%;
  border: none; /* 移除iframe默认边框 */
  display: block; /* 消除iframe底部的空白间隙 */
}

对应的HTML代码简化为：

<iframe src="/static/HowToPay.pdf"></iframe>

方法二：用视口单位直接设置高度 #

不想修改根元素样式的话，可以直接用vh（视口高度单位），100vh代表整个视口高度：

<iframe src="/static/HowToPay.pdf" width="100%" height="100vh" border="0"></iframe>

如果页面有固定导航栏，可调整为calc(100vh - 导航栏高度)避免遮挡。

embed/object标签的适配方案 #

之前尝试这两个标签无效的话，同样套用上述样式逻辑：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

object {
  width: 100%;
  height: 100%;
  border: none;
}

HTML代码：

<object data="/static/HowToPay.pdf" type="application/pdf"></object>

额外注意事项 #

• 确认PDF文件路径正确，浏览器能正常加载该文件。
• 部分浏览器内置的PDF阅读器工具栏会占据一定高度，这属于浏览器默认行为，无法通过CSS完全移除。
• 如果iframe嵌套在其他容器内，需确保该容器也设置了height: 100%，否则iframe的百分比高度仍然无法生效。

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