以下是一些现代的方法:

Approach 1 - Combination of viewport relative units / calc(). The expression calc(100vh - 30px) represents the remaining height. Where 100vh is the height of the browser and the usage of calc() effectively displaces the height of the other element. Example Here body { margin: 0; } .banner { background: #f00; height: 30px; } iframe { display: block; background: #000; border: none; height: calc(100vh - 30px); width: 100%; } <div class="banner"></div> <iframe></iframe> Support for calc() here; support for viewport relative units here.

Approach 2 - Flexbox approach Example Here Set the display of the common parent element to flex, along with flex-direction: column (assuming you want the elements to stack on top of each other). Then set flex-grow: 1 on the child iframe element in order for it to fill the remaining space. body { margin: 0; } .parent { display: flex; flex-direction: column; min-height: 100vh; } .parent .banner { background: #f00; width: 100%; height: 30px; } .parent iframe { background: #000; border: none; flex-grow: 1; } <div class="parent"> <div class="banner"></div> <iframe></iframe> </div> Since this approach has less support1, I'd suggest going with the aforementioned approach.

1虽然它似乎在Chrome/FF中工作，但它在IE中不起作用(第一种方法在所有当前的浏览器中都有效)。

类似的答案@MichAdel，但我使用JQuery和更优雅。

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id为iframe标签的ID

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

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

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

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

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

一个简单的jQuery解决方案

在iframed页面内的脚本中使用此选项

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}

为什么不这样做(对body padding/margin进行轻微调整)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>

如果你可以访问将要加载的iframe的内容，你可以告诉它的父元素在它调整大小的时候调整大小。

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

如果页面上有多个iframe，您可能需要使用id或其他聪明的方法来增强.find(“iframe”)，以便选择正确的iframe。