我认为你有一个概念上的问题。要说“我尝试在iframe上设置高度:100%，结果非常接近，但iframe试图填充整个页面”，好吧，什么时候“100%”不等于“整个”?

你已经要求iframe填充它的容器(也就是body)的整个高度，但不幸的是，它在<div>上面有一个块级别的兄弟，你要求它的大小为30px。所以父容器的总大小现在被要求为100% + 30px > 100%!因此滚动条。

我认为你的意思是你想让iframe像帧和表单元一样消耗剩下的东西，即height="*"。IIRC，这个不存在。

不幸的是，据我所知，也没有办法有效地混合/计算/减去绝对和相对单位，所以我认为你只有两个选择:

绝对定位你的div 会把它从容器里拿出来吗 单独的iframe将消耗它的 容器的高度。这就剩下你 还有各种各样的问题 虽然，但也许是为了你 做不透明或对齐将 好的。 或者，您需要指定 %高度的div和减少 iframe的高度减去那么多。 如果绝对高度是 这很重要，你需要申请 这是div的子元素 代替。

也许这个问题已经有了答案(上面的一些答案是“正确的”方法)，但我想我只是补充我的解决方案。

我们的iFrame是在一个div中加载的，因此我需要一些其他的窗口。看到我们的项目已经严重依赖jQuery，我发现这是最优雅的解决方案:

$("iframe").height($("#middle").height());

当然，“#middle”是div的id。你需要做的唯一额外的事情是，每当用户调整窗口大小时，召回这个大小变化。

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});

我们使用JavaScript来解决这个问题;这是来源。

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

备注:ifm为iframe ID

pageY()由John Resig (jQuery的作者)创建

另一种选择是使用vh

<iframe src='/' style="display:block; border:none; height:100vh; width:100%;"></iframe>

它将与下面提到的代码一起工作

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>

“无缝”属性是一个新的标准，旨在解决这个问题:

http://www.w3schools.com/tags/att_iframe_seamless.asp

当分配此属性时，它将删除边框和滚动条，并将iframe大小设置为其内容大小。 不过它只支持Chrome和最新的Safari浏览器

更多信息请点击这里: HTML5 iFrame无缝属性