如何将iframe高度设置为100%并去除多余滚动条？

API 探路者

2026-10-5

iframe高度100%不生效解决方案

问题根因

iframe设置height:100%不生效的核心原因是百分比高度依赖父元素的明确高度定义，默认状态下html、body元素的高度由实际内容撑开，没有预设的明确高度值，所以子元素的100%高度会失效。

修复方案

固定占满整个视口的方案

如果需要iframe始终占满整个浏览器窗口高度，按如下配置所有祖先元素的高度即可：

<!DOCTYPE html>
<html style="height: 100%;margin: 0;padding: 0;">
<body style="height: 100%;margin: 0;padding: 0;">
<div style="margin:0;padding:0;overflow:hidden;height: 100%;">
  <iframe 
    src="https://example.com/" 
    frameborder="0" 
    scrolling="no" 
    style="overflow:hidden;height:100%;width:100%;border: none;"
    height="100%" 
    width="100%"
  ></iframe>
</div>
</body>
</html>

修改点说明：

给html、body、外层包裹div三个元素都添加了height: 100%属性，给百分比高度提供计算基准
给iframe添加scrolling="no"属性，兼容旧版浏览器的滚动条隐藏需求，和CSS的overflow:hidden配合避免出现滚动条

同域iframe自适应内容高度方案

如果不需要iframe占满整个视口，而是要高度随内部内容自动适配，可以用JS动态获取内部文档高度赋值，仅同域场景可用：

const iframe = document.querySelector('iframe')
// 等待iframe内容加载完成后再计算高度
iframe.onload = function() {
  const innerHeight = iframe.contentDocument.documentElement.scrollHeight
  iframe.style.height = `${innerHeight}px`
}